html瀑布流原理,css/js实现瀑布流效果分析

今天来看看瀑布流效果的实现：

所谓瀑布流，首先就是从上往下的布局，所有元素的宽度相同，高度不一定相同，但是最终呈现的效果就是所有元素间距相同的排列在一起。今天就来探讨下实现的方式。

column实现

这个是出镜最高的css实现了，因为它基本上属于最简单了，我们先来看看效果：

.pull_container {

-moz-column-count: 2;

-webkit-column-count: 2;

column-count: 2;

-moz-column-gap: 10px;

-webkit-column-gap: 10px;

column-gap: 10px;

width:600px;

margin:0px auto;

}

.pull_item {

margin-bottom: 10px;

background: #ccc;

-moz-page-break-inside: avoid;

-webkit-column-break-inside: avoid;

break-inside: avoid;

}

item1