是开头都会说的原理

瀑布流布局有两种，一种是固定列，一种是非固定列。在此主要记述第一种的实现。

固定列的特征是：无论页面如何缩放，每行的总列数都一致。

一行4列的瀑布流从布局的角度来说，就是4个li标签。通过一定的事件（比如滚动条滚动多少px），然后读取之，再把数据动态地添加到页面中。

添加数据原则，不是根据li索引值来加，而是根据各列中高度最短的的那列动态添加。否则可能导致页面很难看（左右高度不统一）。

实例涉及ajax方法。可在服务器环境下运行。

废话不多说了。直接上样式。

<ul id="ul1"> <li> <div> <img src="images/1.jpg"> <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p> </div> </li> <li> <div> <img src="images/2.jpg"> <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p> </div> </li> <li> <div> <img src="images/3.jpg"> <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p> </div> </li> <li> <div> <img src="images/4.jpg"> <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p> </div> </li> </ul>

css

*{ margin:0; padding: 0;}ul li{ list-style: none;}#ul1{ width: 1080px; margin: 100px auto 0;}li{ width: 247px; float: left; margin-right: 10px;}li div{ border:1px solid #000;padding:10px; margin-bottom:10px;}li div img{ width: 225px;display: block;}

基本效果如图：

样式显示没问题之后，就把li里面的代码删掉。

接下来通过ajax来动态添加。

数据哪里来？

这里用的是wookmark的数据接口。

http:///api/json/popular?page='+num+'&callback=?';}var bCheck=false;function getList(n){ $.getJSON(createUrl(n),function(data){ if(data.length==0){ return false; }else{ for(var i=0;i<data.length;i++){ //console.log(data[i].preview); var $html=$('<div><img src="'+data[i].preview+'"><p>'+data[i].title+'</p></div>'); $('li').eq(getShortestLi()).append($html); $html.find('img').css('height',(data[i].height*225/data[i].width)+'px'); $html.find('img').css('width','225px'); }; } bCheck=true; });}$(function(){ var pageNum=1; getList(pageNum); $(window).scroll(function(){ var $li=$('li').eq(getShortestLi()); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //console.log([$li.offset().top+$li.height(),document.documentElement.clientHeight+scrollTop]) //如果li高度与li到页面顶部的高度之和<可视区高度+滚动距离 if($li.offset().top+$li.height()<document.documentElement.clientHeight+scrollTop){ if(bCheck){ bCheck=false; pageNum++; //console.log(pageNum); getList(pageNum); }else{ return false; } } })})

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！