纯CSS3多列的瀑布流布局演示

网上的瀑布流布局大部分都是通过JS来求定位,但现在css3也可以做到了,你不需要使用一点JS,就可以做出一个反应快速的CSS3瀑布流布局

html代码

<div class="container">
<div class="waterfall">

<div class="pin">
<img src="http://dummyimage.com/640x4:3" />
<p>1 convallis timestamp</p>
</div>

<div class="pin">
2 Donec a fermentum nisi.
</div>

<div class="pin">
<img src="http://dummyimage.com/640x3:4" />
<p>
3 Nullam eget lectus augue. Donec eu sem sit amet ligula
faucibus suscipit. Suspendisse rutrum turpis quis nunc
convallis quis aliquam mauris suscipit.
</p>
</div>

<div class="pin">
<img src="http://loremflickr.com/640/480/germany" />
<p>
4 Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue.
</p>
</div>

<div class="pin">
<img src="http://dummyimage.com/480x4:3" />
<p>
5 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque. Nam ac elit risus,
ac blandit dui. Duis rutrum porta tortor ut convallis.
Duis rutrum porta tortor ut convallis.
</p>
</div>

<div class="pin">
<img src="http://dummyimage.com/480x3:4" />
<p>
6 Nullam eget lectus augue. Donec eu sem sit amet ligula
faucibus suscipit. Suspendisse rutrum turpis quis nunc
convallis quis aliquam mauris suscipit.
Duis rutrum porta tortor ut convallis.
</p>
</div>

<div class="pin">
<img src="http://dummyimage.com/640x21:10" />
<p>
7 Nullam eget lectus augue.
</p>
</div>

<div class="pin">
<p>
8 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque.
</p>
</div>

<div class="pin">
<img src="http://dummyimage.com/800x4:3" />
<p>
9 Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue. Suspendisse id nulla
ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.
</p>
</div>

<div class="pin">
<img src="http://dummyimage.com/900x4:2" />
<p>
10 Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue. Suspendisse id nulla
ac urna vestibulum mattis.
</p>
</div>

<div class="pin">
<img src="http://dummyimage.com/640x5:4" />
<p>
11 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque. Nam ac elit risus,
ac blandit dui. Duis rutrum porta tortor ut convallis.
</p>
</div>

<div class="pin">
<img src="http://loremflickr.com/1024/768/cool" />
<p>
12 Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue. Suspendisse id nulla
ac urna vestibulum mattis.
</p>
</div>

<div class="pin">
<img src="http://dummyimage.com/800x16:3" />
<p>
13 Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue. Suspendisse id nulla
ac urna vestibulum mattis.
</p>
</div>

<div class="pin">
<img src="http://loremflickr.com/1024/768/vw,golf,variant/all" />
<p>
14 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque. Nam ac elit risus,
ac blandit dui. Duis rutrum porta tortor ut convallis.
</p>
</div>

<div class="pin">
<img src="http://dummyimage.com/300x4:3" />
<p>
15 Nullam eget lectus augue.
</p>
</div>

<div class="pin">
<img src="http://dummyimage.com/640x16:9" />
<p>
16 Nullam eget lectus augue.
</p>
</div>
</div>
</div>

css代码:

body {
background-color: #f6f6f6;
}

.container {
width: 80%;
margin: 0 auto;
}

.waterfall {
-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;
}

.pin {
padding: 1em;
margin: 0 0.125em 1em;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
background: white;
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
}
.pin img {
width: 100%;
padding-bottom: 1em;
margin-bottom: 0.5em;
border-bottom: 1px solid #cccccc;
}

不服来看看 演示

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原文链接:纯CSS3多列的瀑布流布局演示 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/css3-waterfall-layout.html)

发表评论

请登录后发表评论:

“纯CSS3多列的瀑布流布局演示”有4个评论

  1. oudayu2233

    为什么我的代码在firefox没起到效果。
    在360浏览器是对。

    登录回复
  2. 张胖胖只吃两口就饱啦

    这样也只是样式看上去一样吧。和真正的瀑布流还是有区别,比如滑到底部时加载新内容

    登录回复
    • Theask

      底部自动加载新内容属于ajax无限加载,那本身不属于mar布局的内容结构

      登录回复