jquery 瀑布流代码 [简约]

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

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流代码</title>
    <link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body>
    
 <div id="box">
     <div class="row">
         <ul class="pic clearfix">
             <li>
                 <a href="#"><img src="static/images/0.jpg"></a>
                 <div class="title">
                     <h3>图片展示展示</h3>
                 </div>
             </li>
             <li>
                 <a href="#"><img src="static/images/1.jpg"></a>
                <div class="title">
                     <h3>图片展示展示</h3>
                 </div>
             </li>
             <li>
                 <a href="#"><img src="static/images/2.jpg"></a>
                 <div class="title">
                     <h3>图片展示展示</h3>
                 </div>
             </li>
             <li>
                 <a href="#"><img src="static/images/3.jpg"></a>
                 <div class="title">
                     <h3>图片展示展示</h3>
                 </div>
             </li>
             <li>
                 <a href="#"><img src="static/images/4.jpg"></a>
                 <div class="title">
                     <h3>图片展示展示</h3>
                 </div>
             </li>
             <li>
                 <a href="#"><img src="static/images/5.jpg"></a>
                 <div class="title">
                     <h3>图片展示展示</h3>
                 </div>
             </li>
             <li>
                 <a href="#"><img src="static/images/6.jpg"></a>
                 <div class="title">
                     <h3>图片展示展示</h3>
                 </div>
             </li>
             <li>
                 <a href="#"><img src="static/images/7.jpg"></a>
                 <div class="title">
                     <h3>图片展示展示</h3>
                 </div>
             </li>
             <li>
                 <a href="#"><img src="static/images/8.jpg"></a>
                 <div class="title">
                     <h3>图片展示展示</h3>
                 </div>
             </li>
         </ul>

         <div class="loading"></div>

     </div>
 </div>


<div class="go-top"></div>

<script src="static/js/jquery-1.8.2.min.js"></script>
<script src="static/js/init.js"></script>
</body>
</html>

View Code

CSS:

html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
li{list-style:none;}
textarea{overflow:auto;resize:none;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{
    font:14px/100% arial,"//5b8b//4f53";color:#333;outline:0;
    -webkit-tap-highlight-color: rgba(255,255,255,0);
    -webkit-focus-ring-color: rgba(255, 255, 255, 0);
    outline: none;
}
a{color:#656565;transition:all .4s;}
a:hover{color:#1ba9e9;}
.fl{float:left;}
.fr{float:right;}
.clearfix:after,
.row:after,
.fl:after,
.fr:after {
    clear:both;
    content:‘\0020‘;
    display:block;
    height:0;    
}
.clearfix{zoom: 1;}
.row{width:1000px;margin:0 auto;}
.pic{
    background:#ddd;
    position: relative;
    margin-top:10px;
}
.pic li{
    height:30px;
    background:#DDD;
    position: absolute;
    padding:20px;
    width:280px;
    transition:1s;
}
.pic li img{
    width:100%;
}
.title{
    height:40px;
    line-height:40px;
    width:100%;
    margin-top:5px;
    background:orange;
}
.loading{
    width:1000px;
    height:100px;
    background:#fff url(../images/loading.jpg) center no-repeat;
    position: fixed;
    bottom:0;
    display:none;
}
.go-top{
    width:60px;
    height:60px;
    background:#ddd;
    position: fixed;
    right:20px;
    bottom:20px;
    cursor:pointer;
    border-radius:5px;
}
.go-top:hover{
    background:orange;
}

View Code

JQ(请事前引入 jquery 库):

//一定要等img加载完之后才执行定位，不然会定不了位
$(window).load(function(){

    var showPic = function(){
        //现有的图片进行定位
        var oPic = $(‘.pic‘);
        var aPicLi = oPic.children(‘li‘);
        var oTopOne = oTopTwo =  oTopThree = 0;

        //思路是累加同一列图片高度来实现定位,当然最重要的是拿到同一列前一个的图片高度进行累加来实现高度累加
        //这里采用了 .animate 函数，如果不喜欢这种形式可以改成 .css 函数
        for( var i = 0 , len = aPicLi.length ; i < len ; i++ ){
            if ( i < 3 ) {
                switch( i % 3 ){
                    case 0:
                    aPicLi.eq(i).animate({‘left‘:‘0px‘,‘top‘: 0, ‘height‘ : aPicLi.eq(i).find(‘img‘).height() + 50 +‘px‘});
                    break;
                    case 1:
                    aPicLi.eq(i).animate({‘left‘:‘340px‘,‘top‘:0, ‘height‘ : aPicLi.eq(i).find(‘img‘).height() + 50 +‘px‘});
                    break;
                    default:
                    aPicLi.eq(i).animate({‘left‘:‘680px‘,‘top‘:0, ‘height‘ : aPicLi.eq(i).find(‘img‘).height() + 50 +‘px‘});
                }
            }else{
                switch( i % 3 ){
                    case 0:
                    oTopOne += aPicLi.eq( i-3 ).find(‘img‘).height() + 110;
                    aPicLi.eq(i).animate({‘left‘:‘0px‘ , ‘top‘: oTopOne +‘px‘ , ‘height‘ : aPicLi.eq(i).find(‘img‘).height() + 50 +‘px‘});
                    break;
                    case 1:
                    oTopTwo += aPicLi.eq( i-3 ).find(‘img‘).height()  + 110;
                    aPicLi.eq(i).animate({‘left‘:‘340px‘ , ‘top‘: oTopTwo +‘px‘ , ‘height‘ : aPicLi.eq(i).find(‘img‘).height() + 50 +‘px‘});
                    break;
                    default:
                    oTopThree += aPicLi.eq( i-3 ).find(‘img‘).height()  + 110;
                    aPicLi.eq(i).animate({‘left‘:‘680px‘ , ‘top‘: oTopThree +‘px‘ , ‘height‘ : aPicLi.eq(i).find(‘img‘).height() + 50 +‘px‘});
                }
            }
        }
    }

    //一开始先把现有的图片进行定位
    showPic();

    //获取数据
    var getJson = function(){
        $.ajax({
            url: ‘static/js/imgJson.json‘,
            type: ‘GET‘,
            dataType: ‘json‘,
            beforeSend:function(){
                $(‘.loading‘).show();
            },
            success:function( data ){
                $(‘.loading‘).hide();
                for( var i = 0 , len = data.length ; i < len ; i++){
                    var li = ‘<li><a href="#"><img src="static/images/‘+data[i].url+‘" style="width:‘+data[i].width+‘;height:‘+data[i].height+‘;"></a><div class="title"><h3>‘+data[i].title+‘</h3></div></li>‘;
                    $(‘.pic‘).append(li);
                }

                //只有在添加完DOM 之后，才重新计算位置;
                showPic();    
            }
        });
    }

    //滚动条滚动的时候
    $(window).scroll(function(){
        if ( $(window).scrollTop()>=$(document).height()-$(window).height() ) {
            //执行接口操作
            getJson();
        }
    });



    //回到顶部
    $(‘.go-top‘).click(function(){
        $(‘body,html‘).animate({scrollTop:0},500);  
        return false;
    });


});

View Code

JSON 数据 -> 来模拟 PHP 接口数据：

[{"url":"9.jpg","title":"新的来了1","width":199,"height":220},{"url":"10.jpg","title":"新的来了2","width":160,"height":220},{"url":"11.jpg","title":"新的来了3","width":240,"height":220},{"url":"12.jpg","title":"新的来了4","width":361,"height":220},{"url":"13.jpg","title":"新的来了1","width":284,"height":177},{"url":"14.jpg","title":"新的来了2","width":284,"height":177},{"url":"15.jpg","title":"新的来了3","width":284,"height":177},{"url":"16.jpg","title":"新的来了4","width":259,"height":194}]

View Code

注意：

1. 首先先准备好图片。

2. 各个元素路径。

3. 务必好让后端接口输出图片尺寸，来解决定位问题。

4. 缺点是因为写法是每次加载一次接口就会重新计算元素位置（包括原有的图片元素），比较消耗性能。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jquery 瀑布流代码 [简约]