瀑布流布局--jQuery写法

HTML

 1 <div id="main">
 2         <div class="box">
 3             <div class="pic">
 4                 <img src="images/0.jpg" alt="">
 5             </div>
 6         </div>
 7         <div class="box">
 8             <div class="pic">
 9                 <img src="images/1.jpg" alt="">
10             </div>
11         </div>
12         <div class="box">
13             <div class="pic">
14                 <img src="images/2.jpg" alt="">
15             </div>
16         </div>
17         <div class="box">
18             <div class="pic">
19                 <img src="images/3.jpg" alt="">
20             </div>
21         </div>
22         <div class="box">
23             <div class="pic">
24                 <img src="images/4.jpg" alt="">
25             </div>
26         </div>
27         <div class="box">
28             <div class="pic">
29                 <img src="images/2.jpg" alt="">
30             </div>
31         </div>
32 </div>

CSS

 1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 #main {
 6     position: relative;
 7 
 8 }
 9 .box {
10     padding:15px 0 0 15px;
11     float:left;
12 }
13 .pic {
14     padding: 10px;
15     border: 1px solid #ccc;
16     border-radius: 5px;
17     box-shadow: 0px 0px 5px #ccc;
18     img {
19         width:165px;
20         height:auto;
21     }
22 }

JavaScript

 1 $(window).on("load",function () {
 2     waterfall();
 3     var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}
 4     //模拟json数据;
 5     $(window).on("scroll",function () {
 6         if(checkScrollSlide){
 7             $.each(dataInt.data,function (key,value) {
 8                 var oBox=$("<div>").addClass("box").appendTo($("#main"));
 9                 //jQuery支持连缀,隐式迭代;
10                 var oPic=$("<div>").addClass('pic').appendTo($(oBox));
11                 $("<img>").attr("src","images/"+$(value).attr("src")).appendTo(oPic);
12             });
13             waterfall();
14         }
15     })
16 });
17 //流式布局主函数;
18 function waterfall () {
19     var $boxs=$("#main>div");
20     //获取#main元素下的直接子元素div.box;
21 
22     //获取每一列的宽度;
23     var w=$boxs.eq(0).outerWidth();
24     //outerWidth()获取包含padding和border在内的宽度;
25     //var w=$boxs.eq(0).width();
26     //width()只能获取给元素定义的宽度;
27 
28     var cols=Math.floor($(window).width()/w);
29     //获取多少列;
30     $("#main").width(w*cols).css("margin","0 auto");
31     //设置#main元素的宽度和居中样式;
32 
33     var hArr=[];
34     //每一列高度的集合;
35     $boxs.each(function (index,value) {
36     //遍历每一个box元素;
37     //为了找到之前所有元素的最低点,然后将本元素设置到最低点之下;
38         var h=$boxs.eq(index).outerHeight();
39         //每一个box元素的高,
40         if (index<cols) {
41             hArr[index]=h;
42             //确定每列第一个元素的高度;
43         } else{
44             var minH=Math.min.apply(null,hArr);
45             //得出列高数组中的最小高度;
46             var minHIndex=$.inArray(minH,hArr);
47             //$.inArray()方法得出元素(minH)在数组(hArr)中的index值;
48             //console.log(value);
49             //此时的value是第一行之后的所有的box元素的DOM对象!;
50             $(value).css({
51             //$(value):将DOM对象转换成jQuery对象,才能继续使用jQuery方法;
52                 "position":"absolute",
53                 "top":minH+"px",
54                 "left":minHIndex*w+"px"
55             });
56             hArr[minHIndex]+=$boxs.eq(index).outerHeight();
57             //最低高元素的高度+刚添加到最低高度下的元素的高度=新的列高;
58         };
59     });
60     // console.log(hArr);
61 };
62 function checkScrollSlide () {
63     var $lastBox=$("#main>div").last();
64     var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
65     var scrollTop=$(window).scrollTop();
66     var documentH=$(window).height();
67     return (lastBoxDis<scrollTop+documentH)?true:false;
68 }