瀑布流布局实现的三种方式

哈哈哈 夜晚才是写博客的好时间。 0.0 ——–HANK

---

1. 瀑布流布局的特点？
   答：首先，是图片的宽度固定，图片的长度不一样。其次，是当页面滚动时 ，会再次加载数据，动态的渲染在页面上。

2. 瀑布流布局的原理？
   首先，获取图片的固定的宽度W，网页body的clientWidth
   其次，获取在你的版面中显示多少列图片。cols = clientHeight / W;
   然后，把前cols的offsetHeight存在一个数组arr中，其他的用else
   {
   do something………….
   }处理
   继续，是把接下来的图片放在数组arr中最小的那一项下面（说白啦，就是那列短，放在那一列），同时设置一系列的css样式。
   最后加载从服务器弄来的数据，并处理渲染到页面上就行。

---

下面是对于“瀑布流”实现的三种方式的叙述以及实践截图

1.原生Javascript实现瀑布流
核心代码:

2.JQuery实现的瀑布流布局

3.利用CSS3的属性来设置
说白啦就是利用一个属性进行设置：column来设置就行，
缺点：就是无法做到控制他们之间的间距。

---

效果图：

---

结构层图：

样式图：

最后我想说的是：建议大家可以去慕课网上去学习视频教程—瀑布流布局