css+jQuery实现瀑布流
css+jQuery实现瀑布流
——我一直不太信任自己的记忆力，所以我把它们都写下来
pinterest用瀑布流展示唯美图片没多久，国内很多网站也运用了这种漂亮的流式布局，比如蘑菇街、美丽说、花瓣网等。今天周末闲在家里，实在百无聊赖，就玩儿了一下瀑布流，先看效果，不然都没有耐心往下看了。
这个动态图看起来确实不太流畅，下面有下载链接，直接打开index.html即可看到效果.
下面是index.html文件，看着下面的代码说下具体的思路
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width" scale-initial="1"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/script.js"></script> <title>jQuery实现瀑布流</title> </head> <body> <div id="main"> <div class="item"> <div class="pic"> <img src="img/img1.jpg"> <p>有的人淡了，淡的如一杯清水。有的人浓了，浓的如一杯咖啡。有的人醉了，醉在春天的梦里。有的人醒了，醒在残酷的现实。</p> </div> </div> <div class="item"> <div class="pic"> <img src="img/img2.jpg"> <p>有的人淡了，淡的如一杯清水。有的人浓了，浓的如一杯咖啡。有的人醉了，醉在春天的梦里。有的人醒了，醒在残酷的现实。</p> </div> </div> <div class="item"> <div class="pic"> <img src="img/img3.jpg"> <p>有的人淡了，淡的如一杯清水。有的人浓了，浓的如一杯咖啡。有的人醉了，醉在春天的梦里。有的人醒了，醒在残酷的现实。</p> </div> </div> <div class="item"> <div class="pic"> <img src="img/img4.jpg"> <p>有的人淡了，淡的如一杯清水。有的人浓了，浓的如一杯咖啡。有的人醉了，醉在春天的梦里。有的人醒了，醒在残酷的现实。</p> </div> </div> <div class="item"> <div class="pic"> <img src="img/img5.jpg"> <p>有的人淡了，淡的如一杯清水。有的人浓了，浓的如一杯咖啡。有的人醉了，醉在春天的梦里。有的人醒了，醒在残酷的现实。</p> </div> </div> <div class="item"> <div class="pic"> <img src="img/img6.jpg"> <p>有的人淡了，淡的如一杯清水。有的人浓了，浓的如一杯咖啡。有的人醉了，醉在春天的梦里。有的人醒了，醒在残酷的现实。</p> </div> </div> <div class="item"> <div class="pic"> <img src="img/img7.jpg"> <p>有的人淡了，淡的如一杯清水。有的人浓了，浓的如一杯咖啡。有的人醉了，醉在春天的梦里。有的人醒了，醒在残酷的现实。</p> </div> </div> <div class="item"> <div class="pic"> <img src="img/img8.jpg"> <p>有的人淡了，淡的如一杯清水。有的人浓了，浓的如一杯咖啡。有的人醉了，醉在春天的梦里。有的人醒了，醒在残酷的现实。</p> </div> </div> <div class="item"> <div class="pic"> <img src="img/img9.jpg"> <p>有的人淡了，淡的如一杯清水。有的人浓了，浓的如一杯咖啡。有的人醉了，醉在春天的梦里。有的人醒了，醒在残酷的现实。</p> </div> </div> <div class="item"> <div class="pic"> <img src="img/img10.jpg"> <p>有的人淡了，淡的如一杯清水。有的人浓了，浓的如一杯咖啡。有的人醉了，醉在春天的梦里。有的人醒了，醒在残酷的现实。</p> </div> </div> <div class="item"> <div class="pic"> <img src="img/img11.jpg"> <p>有的人淡了，淡的如一杯清水。有的人浓了，浓的如一杯咖啡。有的人醉了，醉在春天的梦里。有的人醒了，醒在残酷的现实。</p> </div> </div> <div class="item"> <div class="pic"> <img src="img/img12.jpg"> <p>有的人淡了，淡的如一杯清水。有的人浓了，浓的如一杯咖啡。有的人醉了，醉在春天的梦里。有的人醒了，醒在残酷的现实。</p> </div> </div> <div class="item"> <div class="pic"> <img src="img/img9.jpg"> <p>有的人淡了，淡的如一杯清水。有的人浓了，浓的如一杯咖啡。有的人醉了，醉在春天的梦里。有的人醒了，醒在残酷的现实。</p> </div> </div> <div class="item"> <div class="pic"> <img src="img/img10.jpg"> <p>有的人淡了，淡的如一杯清水。有的人浓了，浓的如一杯咖啡。有的人醉了，醉在春天的梦里。有的人醒了，醒在残酷的现实。</p> </div> </div> <div class="item"> <div class="pic"> <img src="img/img11.jpg"> <p>有的人淡了，淡的如一杯清水。有的人浓了，浓的如一杯咖啡。有的人醉了，醉在春天的梦里。有的人醒了，醒在残酷的现实。</p> </div> </div> <div class="item"> <div class="pic"> <img src="img/img12.jpg"> <p>有的人淡了，淡的如一杯清水。有的人浓了，浓的如一杯咖啡。有的人醉了，醉在春天的梦里。有的人醒了，醒在残酷的现实。</p> </div> </div> </div> </body> </html>
div#main 是整个瀑布流布局的父标签，div.item是瀑布流子元素，然后div.item里面可以添加图片、文字等。
首先要明确地是瀑布流布局的思路是：元素width固定，height是不固定的。我这里设置的div#main的宽度是1024px，position=relative，这里设置相对定位是为了接下来添加子元素的绝对定位。
①然后先放了四个子元素div.item在第一行（这四个不需要设置绝对定位），然后把第一行四个元素的高度保存到数组中，假设四个元素从左到右高度依次是 arrH = [140,110,120,130]
②接下来元素添加的时候需要设置position=absolute，然后把它添加在上一行高度最短的一个元素下面。比如这个元素高200px,那么它应该加在第二列的位置（因为110是最小高度），怎么把它添加到第二列的位置呢？当然是设置top和left。然后把数组110改成110+200，所以现在数组变成了 arrH = [140,310,120,130]
③然后继续添加元素，这一次元素需要添加在第三列（因为120是最小高度），依次添加下去。
上面是瀑布流实现的基本思路，还有一个知识点就是滚动条滚到下面的时候触发事件，瀑布流继续添加元素。这个不再赘述了，网上很多资料，还有我的源码。源码js文件都有注释
亲们下载的都给个赞哦，听说积攒人品哦。有建议的期待你回复
源码链接 瀑布流_jQuery实现.zip
- 瀑布流_jQuery实现.zip (959.7 KB)
- 下载次数: 13
上一篇： 瀑布流 瀑布流