HTML

1 
     
       2         
      
        3             
       
         4                 
         5             
       
 6         
      
 7         
      
        8             
       
         9                 
        10             
       
11         
      
12         
      
       13             
       
        14                 
        15             
       
16         
      
17         
      
       18             
       
        19                 
        20             
       
21         
      
22         
      
       23             
       
        24                 
        25             
       
26         
      
27         
      
       28             
       
        29                 
        30             
       
31         
      
32 
     

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=$("
     
      ").addClass("box").appendTo($("#main")); 9                 //jQuery支持连缀,隐式迭代;10                 var oPic=$("
      
       ").addClass('pic').appendTo($(oBox));11                 $("
       ").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
       
        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