jQuery實作瀑布流佈局_jquery

HTML

複製程式碼程式碼如下：

 

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

 

CSS

複製程式碼程式碼如下：

 * {
     邊距：0；
     填充：0；
 }
 #main {
     位置：相對；
 }
 .box {
     內邊距：15px 0 0 15px;
     浮動：左；
 }
 .pic {
     內邊距：10px；
     認識：1px實心#ccc;
     未知半徑：5px；
     盒子寬度：0px 0px 5px #ccc;
     圖片{
         寬度：165px；
         高度：自動；
     }
 }

JavaScript

複製程式碼程式碼如下：

 $(window).on("load",function () {
     waterfall();
var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src": "6.jpg"}]}
     //模擬json資料;
     $(window).on("scroll",function () {
         if(checkScrollSlide){
             $.each(dataInt.data,function (key,value) {
                 var oBox=$("

").addClass("box").appendTo($("#main"));
                 //jQuery支援連綴,隱式迭代;
                 var oPic=$("

").addClass('pic').appendTo($(oBox));
                 $("").attr("src","images/" $(value).attr("src")).appendTo(oPic);
;
;
;
;
;
;
;
;
;
;
;              });
             waterfall();
         }
     })
 });
 //流式佈局主函數;
 function waterfall () {
     var $boxs=$("#main>div");
     //取得#main元素下的直接子元素div.box;
     //取得每一列的寬度;
     var w=$boxs.eq(0).outerWidth();
     //outerWidth()取得包含padding和border在內的寬度;
     //var w=$boxs.eq(0).width();
     //width()只能取得給元素定義的寬度;
     var cols=Math.floor($(window).width()/w);
     //取得多少列;
     $("#main").width(w*cols).css("margin","0 auto");
     //設定#main元素的寬度與居中樣式;
     var hArr=[];
     //每一列高度的集合;
     $boxs.each(function (index,value) {
     //遍歷每一個box元素;
     //為了找出先前所有元素的最低點,然後將本元素設定到最低點之下;
         var h=$boxs.eq(index).outerHeight();
         //每一個box元素的高,
         if (index              hArr[index]=h;
             //決定每個列第一個元素的高度;
         } else{
             var minH=Math.min.apply(null,hArr);
             //求列高數組中的最小高度;
             var minHIndex=$.inArray(minH,hArr);
             //$.inArray()方法得出元素(minH)在陣列(hArr)中的index值;
             //console.log(value);              //此時的value是第一行之後的所有的box元素的DOM物件!;              $(value).css({              //$(value):將DOM物件轉換成jQuery物件,才能繼續使用jQuery方法;                  "position":"absolute",                  "top":minH "px",                  "left":minHIndex*w "px"              });              hArr[minHIndex] =$boxs.eq(index).outerHeight();              //最低高元素的高度 剛好加到最低高度下的元素的高度=新的列高;         };
     });
     // console.log(hArr);
 };
 function checkScrollSlide () {
     var $lastBox=$("#main>div").last();
     var lastBoxDis=$lastBox.offset().top Math.floor($lastBox.outerHeight()/2);
     var scrollTop=$(window).scrollTop();
     var documentH=$(window).height();
     return (lastBoxDis  }

詳細解釋清仔細參考註釋吧，我就不單獨再拉出來寫了。