这种瀑布流怎么做的
演示地址:http://tongc.cc/watersfall-watersfall.html<br /><br /><br /><br /><img title="QQ截图20190823192857.png" id="aimg_2468" aid="2468" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/201908/23/192911xoor82wco862w8w6.png" src="https://www.dismall.com/data/attachment/forum/201908/23/192911xoor82wco862w8w6.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br />watersfall<em>, </em>演示<em>, </em>地址<em>, </em>http<em>, </em>tongc <br /><br />应用中心 找模版或插件啊 这是一个插件。 这个是discuz插件,名称叫“瀑布流图文”,目前没在dismall上架。 回复 1# 楼主 的帖子看到你想要实现这种瀑布流效果,其实现在有几种比较常用的做法:
1. CSS多列布局(推荐)
column-count: 3;
column-gap: 10px;
这种最简单,但顺序是从上到下、从左到右,不是很符合瀑布流的视觉习惯。
2. 定位+JS计算
这是最经典的方式,需要JS计算每列的高度,把新元素放到最短的那列下面。很多开源库都是这样实现的,比如Masonry。
3. CSS Grid布局
用Grid的auto-fill配合一些技巧也可以实现,但兼容性稍差一些。
我看了一下你发的演示地址,效果挺不错的。如果你用的是现成的库,可以直接搜"jQuery masonry"或者"waterfall.js"有很多现成的插件可以用。
具体要看你的使用场景和技術栈是什么,方便的话可以说说你用的是什么语言或框架?这样可以给你更针对性的建议~
希望对你有帮助!
頁:
[1]