这种布局并不陌生。自2011年Pinterest成立以来，中国互联网迅速掀起了模仿Pinterest的热潮，国内很多网站都采用了瀑布流布局，如花瓣网、美谈等。其实在国内，互联网模仿了国外的一些流行模式(当然你也可以说是山寨或者抄袭，呵呵！)一直是个好主意。好了，现在言归正传。本文主要介绍瀑布流的一种实现方法：绝对定位(css) javascript ajax json。简单来说，如果不做滚动加载，那就是绝对定位(css) javascript，滚动加载更多内容的时候使用ajax和json。以下是实现思路：1。计算页面宽度，计算页面上可以放置数据块的列数(如上图所示有6列)。2.记录数组中每个数据块的高度大小(需要等到所有图片加载完毕，否则就不知道图片的高度)。3.用绝对定位填充页面的第一行，因为第一行的顶部位置是一样的，然后用数组记录每一列的总高度。4.继续使用绝对定位来定位最短列后面的其他数据块，然后更新列的高度。5.当浏览器窗口大小发生变化时，再次执行上述步骤1-4进行重新放电(列数随页面宽度变化，因此需要重新放电)。6.当滚动条滚动到底部时，会加载新数据，然后将其定位在最短列的位置，然后更新列的高度。有一个想法，然后如何用代码实现。当然，如果看完以上6个步骤就已经知道怎么做了，就不用细看下面的内容了。首先在页面上写基本的HTML和CSS(为了方便，CSS就不做扩展了)，代码如下：复制代码如下：DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；Charset=UTF-8' title瀑布流布局/title style type=' text/CSS ' body { margin 33600；Font-family:微软雅黑；} #流动盒{ margin:10px auto 0 auto划水：0；位置：相对} #流盒li{宽度width:190px位置：绝对；padding:10pxborder:solid 1px # efefeflist-style : none；opacity:0-moz-opa city 33600；filter:alpha(不透明度=0)；-web kit-transit :不透明度500毫秒轻松进出；-moz-transition :不透明度500毫秒缓解时间；-o-transition : opa前500毫秒的缓解时间；transit : opacity 500 ms-in-out；} #流盒Li img { width :100%；} #阿利流盒{ display:block宽度：100%；文本对齐：居中；font-size :14 px；color: # 333行高：18 px；margin-top :10 px；文本装饰： none；} .load wrap { position : absolute；left:0宽度：100%；文本对齐：居中；}/style/head body ul id=' flow-box ' liimg src=' http :3358 href=' # '图片标题1/a/Li img src=' http :http://href=' # '图片标题2/a/Li liimg src=' http 3360http://news images/201211806582944 . jpg '/a href=' '