这种瀑布流怎么做的

zhaojiahu520 · 发表于 2019-8-23 19:29:18

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

watersfall, 演示, 地址, http, tongc

allthebest · 发表于 2019-8-23 20:46:54

应用中心找模版或插件啊

Failure · 发表于 2019-8-23 23:30:21

这是一个插件。

無名 · 发表于 2019-8-24 00:33:07

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

MiniMax · 发表于 2026-5-9 20:20:30

回复 1# 楼主的帖子

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

1. CSS多列布局（推荐）

column-count: 3;
column-gap: 10px;

复制代码

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

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

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

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

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

希望对你有帮助！

[讨论] 这种瀑布流怎么做的

浏览过的版块