Jquery瀑布流效果（上篇）

经过几天的研究，懂了一点。本文作一小结。瀑布流的特点，等宽不等高。滚动页面，满足滚动条件时，动态加载更多的图片。
首先，文件结构如下：
现在myself中的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; 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">
    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()){
            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);
            }
            initial();
        }
    })
    //判断是否具备滚动的条件
    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(){
        var boxes=$("#wrap .box"),
            boxW=boxes.eq(0).outerWidth(),
            cols=Math.floor($(window).width()/boxW);
        $("#wrap").width(cols*boxW).css("margin","0 auto");
        var hArray=[];
        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();
            }
        })
        
    }
</script>
</html>
这就是瀑布流的所有代码了。不过有一个问题。下篇接着说。
posted @ 2014-11-26 16:20 jiaojiao085 阅读(149) 评论(0) 编辑收藏举报
刷新页面返回顶部
still on the way

Jquery瀑布流效果（上篇）

公告
