|
网上有很多有关js（jq）实现瀑布流和有关瀑布流的插件很多，例如：插件（Masonry，Wookmark等等）。按照正常的逻辑思维，瀑布流的排版（item列表）一般都是 由左到右，上而下排序的结果，单纯的css实现这一点有些困难 ，下面分享一款由css局实现的瀑布流效果，虽然效果难以达到有些插件的效果，但也算是简单实用吧。 实现效果图：
html结构：
<div class="waterfall">
<div class="item">
<div class="item-content">
三月到大理赏樱花不远不近
</div>
</div>
<div class="item">
<div class="item-content">
三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队那些日子被遗忘的花儿春光
</div>
</div>
<div class="item">
<div class="item-content">
三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆
</div>
</div>
</div>
关于item列表，我添加的比较少，您多添加几个就可以了...... css样式：
.waterfall{
column-count: 3;
column-gap: 0;
}
.item{
box-sizing: border-box;
break-inside: avoid;
padding: 10px;
}
.item-content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
height: auto;
font-size: 20px;
color: #686868;
box-sizing: border-box;
border: 1px solid #ccc;
}
|
