DIV CSS 佈局教程網

HTML

代碼如下:
 <div id="main">
         <div class="box">
             <div class="pic">
                 <img src="images/0.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/1.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/2.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/3.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/4.jpg" alt="">
             </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="images/2.jpg" alt="">
             </div>
         </div>
 </div>

CSS

代碼如下:
 * {
     margin: 0;
     padding: 0;
 }
 #main {
     position: relative;
 }
 .box {
     padding:15px 0 0 15px;
     float:left;
 }
 .pic {
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 5px;
     box-shadow: 0px 0px 5px #ccc;
     img {
         width:165px;
         height:auto;
     }
 }

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=$("<div>").addClass("box").appendTo($("#main"));
                 //jQuery支持連綴,隱式迭代;
                 var oPic=$("<div>").addClass('pic').appendTo($(oBox));
                 $("<img>").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<cols) {
             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<scrollTop+documentH)?true:false;
 }

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