1、该效果使用CSS3的column-width实现,和js版的瀑布流不同:图片将纵向排列。
2、代码中使用了一小段JS,和瀑布流效果无关,主要用来动态插入元素,并实现模拟翻页
举例说明 如图:
首先,css3的布局主要用到下面三个属性
column-count
column-gap
column-rule
其次,在兼容column的浏览器中可以实现瀑布流,代码如下
.demo{width: 500px
height: auto
-webkit-column-count:3
-moz-column-count:3
column-count:3
-webkit-column-gap:10px
-moz-column-gap:10px
column-gap:10px
column-rule:3px outset #ff0000
border: 1px solid #ddd
}
.demo div{
background: #336699
margin-bottom: 4px
color: #eee
padding: 10px
} <div class="demo">
<div>1这是测试用的文字,测试能不能实现瀑布流。</div>
<div>2这是测试用的文字,测试能不能实现瀑布流。</div>
<div>3这是测试用的文字,测试能不能实现瀑布流。</div>
<div>4这是测试用的文字,测试能不能实现瀑布流。</div>
<div>5这是测试用的文字,测试能不能实现瀑布流。</div>
<div>6这是测试用的文字,测试能不能实现瀑布流。</div>
<div>7这是测试用的文字,测试能不能实现瀑布流。</div>
<div>8这是测试用的文字,测试能不能实现瀑布流。</div>
<div>9这是测试用的文字,测试能不能实现瀑布流。</div>
<div>11这是测试用的文字,测试能不能实现瀑布流。</div>
<div>12这是测试用的文字,测试能不能实现瀑布流。</div>
<div>13这是测试用的文字,测试能不能实现瀑布流。</div>
<div>14这是测试用的文字,测试能不能实现瀑布流。</div>
<div>15这是测试用的文字,测试能不能实现瀑布流。</div>
<div>16这是测试用的文字,测试能不能实现瀑布流。</div>
<div>17这是测试用的文字,测试能不能实现瀑布流。</div>
<div>18这是测试用的文字,测试能不能实现瀑布流。</div>
<div>19这是测试用的文字,测试能不能实现瀑布流。</div>
</div>
</div>
您好,很高兴为您解答css3布局间隙问题其实就是盒子模型
一个盒子有内外间距,有盒子厚度,盒子的宽高尺寸,外间距margin,内间距padding,一般间隙都是通过这两个属性来定,比如左边的间距太宽了,以前是10px,那么我们可以这样写,margin-left:5px这样外左间距就是5像素