网页瀑布流布局

什么是瀑布流

瀑布流，又称瀑布流式布局。 是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

瀑布流布局的原理

瀑布流布局要求要进行布置的元素等宽，然后计算元素的宽度与浏览器宽度之比，得到需要布置的列数。

创建一个数组，长度为列数，里面的值为已布置元素的总高度（最开始为0）

然后将未布置的元素依次布置到高度最小的那一列，就得到了瀑布流布局。

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

纯CSS实现瀑布流布局

使用纯CSS方法解决瀑布流布局的是CSS3 的Multi-columns，通过Multi-columns相关的属性column-count、column-gap配合break-inside来实现瀑布流布局。

优点：代码简洁，不影响容器高度。

缺点：每个item块从上往下先排第一列，然后排满第二列，第三列，当页面滚动，就出现第二列去的item块去第一列下面补齐。会出现闪屏效果。

利用jquery和js实现布局

HTML部分：

CSS部分：

jQuery 写法：

    JavaScript写法：

优点：item 不是按顺序排列，不存在页面滚动出现闪屏效果。

缺点：1、当图片未加载完时，绝对定位top值不对，出现item块重叠

            2、容器没有高度

解决方法：

利用瀑布流插件Masonry

CSS部分

HTML部分

js 部分

实现效果图

说到这里瀑布流布局的讲解就结束了～～