Jquery瀑布流效果（下篇）

時間 2019-12-13

原文原文鏈接

接着上篇瀑布流效果說（上篇地址爲http://www.cnblogs.com/jiaojiaome/articles/4123586.html）。javascript

第一個文件myself實現了瀑布流的效果，可是存在能夠優化的地方。
好比initial方法，第一次剛加載的時候調用initial方法從第一張慢慢佈局是沒有問題的。
but,後面拖動滾動後，若是知足條件，繼續加載其餘的，加載畢後再次調用initial()方法，
這裏是能夠優化的，由於以前的元素已經佈局好了，不須要從新佈局。因此能夠從後面的元素開始
本篇遂是優化後的結果。css

因此優化了下initial方法，給它一個參數，若是參數存在就佈局參數裏的元素，不然則佈局$("#wrap .box").html

代碼以下：java

<!DOCTYPE html>
<html >
<head>
<meta charset="gb2312" />
<title>myself瀑布流效果———優化後</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<style type="text/css">
#wrap{position:relative;}
#wrap .box {
    float: left;
    height: auto;
    padding: 10px;
    width: 280px;
}

#wrap .box .info {
    background:none #fff;
    border-radius: 8px;
    box-shadow: 0 0 11px #666666;
    height: auto;
    width: 280px;
}
#wrap .box .info .pic {
    height: auto;
    margin: 0 auto;
    padding-top: 10px;
    width: 260px;
}
#wrap .box .info .pic img {
    border-radius: 3px;
    width: 260px;
}

#wrap .box .info .title {
    color: #666;
    font-size: 18px;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
    width: 260px;
}
#wrap .box .info .title a{
color:#444;
text-decoration:none;
}
</style>
</head>
<body>
    <div id="wrap">
    
        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/1.jpg"></div>
                <div class="title"><a href="http://www.sucaijiayuan.com">素材家園-sucaijiayuan.com</a></div>
            </div>
        </div>
        
        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/2.jpg"></div>
                <div class="title"><a href="http://www.sucaijiayuan.com">素材家園-sucaijiayuan.com</a></div>
            </div>
        </div>
        
        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/3.jpg"></div>
                <div class="title"><a href="http://www.sucaijiayuan.com">素材家園-sucaijiayuan.com</a></div>
            </div>
        </div>
        
        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/4.jpg"></div>
                <div class="title"><a href="http://www.sucaijiayuan.com">素材家園-sucaijiayuan.com</a></div>
            </div>
        </div>
        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/5.jpg"></div>
                <div class="title"><a href="http://www.sucaijiayuan.com">素材家園-sucaijiayuan.com</a></div>
            </div>
        </div>
        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/6.jpg"></div>
                <div class="title"><a href="http://www.sucaijiayuan.com">素材家園-sucaijiayuan.com</a></div>
            </div>
        </div>
    <div class="box">
            <div class="info">
                <div class="pic"><img src="images/7.jpg"></div>
                <div class="title"><a href="http://www.sucaijiayuan.com">素材家園-sucaijiayuan.com</a></div>
            </div>
        </div>
            <div class="box">
            <div class="info">
                <div class="pic"><img src="images/8.jpg"></div>
                <div class="title"><a href="http://www.sucaijiayuan.com">素材家園-sucaijiayuan.com</a></div>
            </div>
        </div>
<div class="box">
            <div class="info">
                <div class="pic"><img src="images/9.jpg"></div>
                <div class="title"><a href="http://www.sucaijiayuan.com">素材家園-sucaijiayuan.com</a></div>
            </div>
        </div>
    <div class="box">
            <div class="info">
                <div class="pic"><img src="images/10.jpg"></div>
                <div class="title"><a href="http://www.sucaijiayuan.com">素材家園-sucaijiayuan.com</a></div>
            </div>
        </div>
    </div>
</body>

    <script type="text/javascript">
        /*第一個文件myself實現了瀑布流的效果，可是存在能夠優化的地方。
    好比initial方法，第一次剛加載的時候調用initial方法從第一張慢慢佈局是沒有問題的。
    but,後面拖動滾動後，若是知足條件，繼續加載其餘的，加載畢後再次調用initial()方法，
    這裏是能夠優化的，由於以前的元素已經佈局好了，不須要從新佈局。因此能夠從後面的元素開始
    本篇遂是優化後的結果。*/
    var hArray=[];
    var datas=[{"src":"1.jpg","txt":"美女圖片1"},
                {"src":"2.jpg","txt":"美女圖片2"},
                {"src":"3.jpg","txt":"美女圖片3"},
                {"src":"4.jpg","txt":"美女圖片4"},
                {"src":"5.jpg","txt":"美女圖片5"},
                {"src":"6.jpg","txt":"美女圖片6"},
                {"src":"7.jpg","txt":"美女圖片7"},
                {"src":"8.jpg","txt":"美女圖片8"},
                {"src":"9.jpg","txt":"美女圖片9"},
                {"src":"10.jpg","txt":"美女圖片10"}];
     initial();
    /*$("window").on("load",function(){
        //首次佈局
        initial();
    })*/
    $(window).scroll(function(){

        if(scrollCommanded()){
        var objArr=[];
            for(var i=0;i<30;i++){
                var index=Math.floor(Math.random()*10);//產生1到9的隨機數
                var box=document.createElement("div");
                box.className="box";
                var info=document.createElement("div");
                info.className="info";
                var pic=document.createElement("div");
                pic.className="pic";
                var img=document.createElement("img");
                img.src="images/"+datas[index].src;
                pic.appendChild(img);
                var title=document.createElement("div");
                title.className="title";
                title.innerHTML='<a href="#">'+datas[index].txt+'</a>';
                info.appendChild(pic);
                info.appendChild(title);
                box.appendChild(info);
                document.getElementById("wrap").appendChild(box);
                objArr.push(box);
            }
            initial(objArr);
        }
    })
    //判斷是否具有滾動的條件
    function scrollCommanded(){
        var last=$("#wrap .box").last();
        if($(window).height()+$(window).scrollTop()>last.offset().top+Math.floor(last.outerHeight()/2)){
            return true;
        }
        return false;
    }
    //初始化佈局
    
    function initial(objArra){
        var boxes=objArra||$("#wrap .box"),
            boxW=objArra?boxes[0].offsetWidth:boxes.eq(0).outerWidth(),
            cols=Math.floor($(window).width()/boxW);
        $("#wrap").width(cols*boxW).css("margin","0 auto");
        if(hArray.length==0){
            boxes.each(function(index,value){
                if(index<cols){
                hArray.push($(value).outerHeight());
                }else{
                    var minH=Math.min.apply(null,hArray);
                    var minIndex=$.inArray(minH,hArray);
                    $(value).css({
                    "position":"absolute",
                    "top":minH,
                    "left":minIndex*boxW}
                    );
                    hArray[minIndex]+=$(value).outerHeight();
                }
            })
        }else{
            $(boxes).each(function(index,value){
                    var minH=Math.min.apply(null,hArray);
                    var minIndex=$.inArray(minH,hArray);
                    $(value).css({
                    "position":"absolute",
                    "top":minH,
                    "left":minIndex*boxW}
                    );
                    hArray[minIndex]+=$(value).outerHeight();
            })
        }
        
        
    }
</script>
</html>

完結了。jquery

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。