css 瀑布流布局问题 高手进

这种瀑布流实现大体有两种方式，一种就是js的方式，一种是css，相对于js来说css的控制不是很好，不能自动加载之类的，只能显示一个瀑布流效果，大体的思路就是一个div里面放两个div分别浮动，高度自动，然后将图片分别放置到这两个div里面，这样就出现一个类似于瀑布流的效果了，当然了这个伪瀑布流的弊端就是如果一列的图片都是很高的，一列都是很矮的图片看着会很不协调。大体就是这个样子

.fall{
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-width: 24em;
-webkit-column-width: 24em;
column-width: 24em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;}

.item {
padding: 1em;
margin: 0 0.125em 1em;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
/*这个是重点 */
break-inside: avoid;
}
这个的缺点是内容是竖排列的，横排的还是要用js

盒子外的div：
{
-moz-column-count: 3;
-webkit-column-count: 3;

column-count: 3;

/* 3是列数*/
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
column-gap: 2em;
/*2em是列间距*/
}

每个盒子：
{
float: left;
}