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

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

html瀑布流原理,css/js实现瀑布流效果分析_第1张图片

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

column实现

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

html瀑布流原理,css/js实现瀑布流效果分析_第2张图片

.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

你可能感兴趣的:(html瀑布流原理)