瀑布流样式

CSS如下

/* 瀑布流样式 */
.waterfall-wrapper {
-moz-column-count:4; /* Firefox */
    -webkit-column-count:4; /* Safari 和 Chrome */
    column-count:4; /* 设置的列数 */
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
    column-gap: 20px;
display:inline-block;
margin-bottom: 20px;
}
.waterfall-box {
-moz-page-break-inside:avoid;
-webkit-column-break-inside:avoid;
break-inside:avoid;
position: initial !important;
}

HTML如下

<div class="waterfall-wrapper content alpha">
    <div class="waterfall-box entry clearfix"  th:each="info:${list}" >
        <div class="entry-up" style="padding: 10px 5px 0px 5px;">
            <h1><a class="post-title" th:href="@{{url}(url=${info.url})}" rel="bookmark" th:text="${info.title}" target="_blank"></a></h1>
        </div>
        <div class="entry-down" style="padding: 10px 5px 0px 5px;">
            <div class="post-meta">
                <span th:text="${info.context}"></span>
            </div>
        </div>
    </div>
</div>

效果如下