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>
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:' 020'; 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; }
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="'+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; }); });
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}]
注意：
1. 首先先准备好图片。
2. 各个元素路径。
3. 务必好让后端接口输出图片尺寸，来解决定位问题。