瀑布流

1.瀑布流

瀑布流,可以有多列,每一列的高度可以不相同,但是宽度必须一样；

排列的方式是,从左往右排列,哪一列总高度最小,就优先排序，把图片放在这一列.

这样排完所有的图片后,可以保证每一列的总高度都相差不大。

2.实现思路

a.先加载所有图片，然后定位（position: absolute;）在第一张那里，重叠在一起；

b.获取每张图片的高度，计算每列图片盒子（li）的总高度，一张一张定位排列位置，优先定位排列在高度最小的一列；

c.图片间距的调整

3.遭遇难题

a。我们在动态加载图片后，获取图片盒子的高度只有初始盒子占位的高度，并不是图片盒子的总高度

因为我们获取高度的时候，图片还没加载出来

这时，就需要我们使用图片预加载，先把图片加载出来，再去获取图片盒子总高度

4.激动人心的代码干货（给哥一个赞啊）

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8" />

  <title></title>

  <link rel="stylesheet" type="text/css" href="css/style2.css" />

 </head>

 <style type="text/css">

  #imgBox {

   width: 600px;

   position: relative;

   margin: 0 auto;

   min-height: 100px;

  }

 

  #imgBox li {

   position: absolute;

   left: 0;

   top: 0;

   -webkit-transition: all 1s ease-out .1s;

   -moz-transition: all 1s ease-out;

   -o-transition: all 1s ease-out .1s;

   transition: all 1s ease-out .1s;

  }

 

  .imgBoxList {

   padding: 10px;

   border: 1px solid #E1E1E1;

  }

 </style>

 <body>

  <div id="imgH">

   <div id="">

    <ul id="imgBox">

    </ul>

   </div>

  </div>

 </body>

 <script src="new/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

 <script type="text/javascript">

  var cache = [];

  var marginLi = 10; //这里设置间距

  (function($) {

   $.preLoadImages = function() {

    var args_len = arguments.length;

    for(var i = args_len; i--;) {

     var cacheImage = document.createElement('img');

     cacheImage.src = arguments[i];

     cache.push(cacheImage);

    }

   }

  })(jQuery)

  $.preLoadImages('img/1.png', 'img/2.png', 'img/2.png', 'img/3.png', 'img/2.png', 'img/2.png', 'img/3.png', 'img/2.png', 'img/2.png', 'img/3.png', 'img/2.png', 'img/2.png', 'img/3.png');

  var WidthLi = $(window).width();

  var WidthH = $('#imgBox').width();

  window.onload = function() { LiJsBox(3) };

  /*浏览器窗口改变时也运行函数*/

  window.onresize = function() { LiJsBox(3) };

  function LiJsBox(colNum) {

   WidthLi = WidthH / colNum - marginLi;

   var LiHtml = '';

   $("#imgBox").html('')

   for(var i = 0; i < cache.length; i++) {

    LiHtml += '<li class="colImg"><div class="imgBoxList"><div><img class="ub-fh" src="' + cache[i].src + '"></div><div class="h3">' + i + '</div></div></li>'

   };

   $("#imgBox").append(LiHtml);

   $(".colImg").width(WidthLi);

   ListImgBox(colNum);

  }

  function ListImgBox(colNum) {

   var imgBoxList = $(".colImg").eq(0).width() + marginLi; //

   var colH = 0;

   var arrayH = [];

   var min_H = 0;

   var minKey = 0;

   for(var i = 0; i < cache.length; i++) {

    colH = $(".colImg").eq(i).height() + marginLi;

    if(i < colNum) {

     arrayH.push(colH);

     $(".colImg").eq(i).css("top", 0);

     $(".colImg").eq(i).css("left", i * imgBoxList);

    } else {

     min_H = Math.min.apply(Math, arrayH);

   //  minKey = arrayH.indexOf(Math.min.apply(Math, arrayH)); //找出高度最小的一列下标  。ie8 不兼容 indexOf

    minKey =	getMinIdex(arrayH,min_H)    

    arrayH[minKey] += colH; //加上新高度后更新高度值

     $(".colImg").eq(i).css("top", min_H); //先得到高度最小的Li，然后把接下来的li放到它的下面

     $(".colImg").eq(i).css("left", minKey * imgBoxList); //第i个li的左坐标就是i*li的宽度

    }

   }

  }

function getMinIdex(s, v) {for(k in s) {if(s[k] == v) {return k;}}} </script>

</html>

5.使用方式

复制以上代码，替换 jq ，图片路径，自己调试去

6.感谢！

分享一个本人写文章的站址

http://tn.51cto.com/article/321

动态加载图片，实现瀑布流效果

瀑布流