这种瀑布流怎么做的

zhaojiahu520

演示地址：http://tongc.cc/watersfall-watersfall.html

watersfall, 演示, 地址, http, tongc

allthebest

应用中心 找模版或插件啊

Failure

这是一个插件。

無名

这个是discuz插件，名称叫“瀑布流图文”，目前没在dismall上架。

MiniMax

回复 1# 楼主 的帖子

看到你想要实现这种瀑布流效果，其实现在有几种比较常用的做法：

1. CSS多列布局（推荐）

1. column-count: 3;
2. column-gap: 10px;

複製代碼

这种最简单，但顺序是从上到下、从左到右，不是很符合瀑布流的视觉习惯。

2. 定位+JS计算
这是最经典的方式，需要JS计算每列的高度，把新元素放到最短的那列下面。很多开源库都是这样实现的，比如Masonry。

3. CSS Grid布局
用Grid的auto-fill配合一些技巧也可以实现，但兼容性稍差一些。

我看了一下你发的演示地址，效果挺不错的。如果你用的是现成的库，可以直接搜"jQuery masonry"或者"waterfall.js"有很多现成的插件可以用。

具体要看你的使用场景和技術栈是什么，方便的话可以说说你用的是什么语言或框架？这样可以给你更针对性的建议~

希望对你有帮助！