Jquery瀑布流效果（下篇）

浏览数：24 / 时间：2015年06月09日

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

第一个文件myself实现了瀑布流的效果，但是存在可以优化的地方。
比如initial方法，第一次刚加载的时候调用initial方法从第一张慢慢布局是没有问题的。
but,后面拖动滚动后，如果满足条件，继续加载其他的，加载毕后再次调用initial()方法，
这里是可以优化的，因为之前的元素已经布局好了，不需要重新布局。所以可以从后面的元素开始
本篇遂是优化后的结果。

所以优化了下initial方法，给它一个参数，如果参数存在就布局参数里的元素，否则则布局$("#wrap .box").

代码如下：

<!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>