jQuery簡單實現瀑布流布局

標籤：rri   abs   事先   通過   doc   結構   設定   scroll   end   

實現原理很簡單

一、算出每行最多存放多少張圖片，賦值給最外層盒子的寬度

二、圖片採用絕對位置，通過js來改變top值，當前頁面的圖片直接在html中設定完畢

三、建立一個數組存放當前所有圖片top值，找到最小top值從而確定下一行第一章圖片位置，以此類推...

四、觸發scroll事件時重新渲染頁面

 

這裡圖片事先準備好，也可以http跨域請求資料~

 

下面是代碼部分

 

css樣式：

            body,div,img{margin:0;padding:0;}            #main{                margin:0 auto;                position:relative;            }            #main .wrap{                padding:10px 0 0 10px;                position:absolute;            }            #main .box{                border:1px solid #666;                border-radius:4px;                width:250px;                padding:5px;            }            #main .box img{                width:250px;            }

 

html結構：

<div id="main">            <div class="wrap">                <div class="box">                    <img src="images/1.jpg">                </div>            </div>            <div class="wrap">                <div class="box">                    <img src="images/2.jpg">                </div>            </div>            <div class="wrap">                <div class="box">                    <img src="images/3.jpg">                </div>            </div>            <div class="wrap">                <div class="box">                    <img src="images/4.jpg">                </div>            </div>            <div class="wrap">                <div class="box">                    <img src="images/5.jpg">                </div>            </div>            <div class="wrap">                <div class="box">                    <img src="images/6.jpg">                </div>            </div>            <div class="wrap">                <div class="box">                    <img src="images/7.jpg">                </div>            </div>            <div class="wrap">                <div class="box">                    <img src="images/8.jpg">                </div>            </div>            <div class="wrap">                <div class="box">                    <img src="images/9.jpg">                </div>            </div>            <div class="wrap">                <div class="box">                    <img src="images/10.jpg">                </div>            </div>            <div class="wrap">                <div class="box">                    <img src="images/11.jpg">                </div>            </div>            <div class="wrap">                <div class="box">                    <img src="images/12.jpg">                </div>            </div>        </div>

 

js代碼：

        //頁面載入完畢渲染        window.onload = function(){            waterFall("#main",".wrap");        };
　　　　　        window.onscroll = function(){
　　　　　　//儲存圖片            var arrImg = [                "images/1.jpg",                "images/2.jpg",                "images/3.jpg",                "images/4.jpg",                "images/5.jpg",                "images/6.jpg",                "images/7.jpg",                "images/8.jpg",                "images/9.jpg",                "images/10.jpg",                "images/11.jpg",                "images/12.jpg"            ];            for(var i=0;i<arrImg.length;i++){                $("#main").append($("<div class=‘wrap‘><div class=‘box‘><img src="+arrImg[i]+"></div></div>"));            }            waterFall("#main",".wrap");        }        //適應不同尺寸視窗大小        /*            @param1 最外層父級元素id            @param2 圖片父級元素類名        */        function waterFall(Id,className){            var    jqId = $(Id),                jqClass = $(className),                pageW = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth,  //當前視窗寬度                colNum = Math.floor(pageW/jqClass.innerWidth()),  //每行列數                mainW = colNum*(jqClass.innerWidth());  //每行總寬度            jqId.css("width",mainW);            //設定top值            var arrT = [];            jqClass.each(function(e){                if(e<colNum){                    jqClass.eq(e).css("left",jqClass.innerWidth()*e);                    arrT.push(jqClass.eq(e).innerHeight());                }else{                    var minH = Math.min.apply(null,arrT),  //擷取當前數組最小值及對應索引值                        index = arrT.indexOf(minH),                        minL = jqClass.eq(index).css("left");                    jqClass.eq(e).css({                        "top":minH,                        "left":minL,                    });                    arrT[index] = minH + jqClass.eq(e).innerHeight();                }            })        };

 

jQuery簡單實現瀑布流布局