个人中心 | 微信开放社区

小程序使用Grid和css变量实现瀑布流布局

前言要实现如下瀑布流效果，动态图片，动态高度 [图片] 我知道使用JS能够实现完美瀑布流，但小程序不比web，坑点会比较多，因此我决定先使用CSS看能不能解决，最后实在不行在使用JS来实现根据网上的教程尝试使用css的方式(column和flex)实现效果，但排列顺序都是竖排而不是横排，不符合产品需求，实现效果如下 [图片] GRID瀑布流如此看来只剩grid这一条路了，还好成功了基础版下列摘自网上使用GRID实现瀑布流的实例模板 [代码] 1/view> 2/view> 3/view> 4/view> 5/view> 6/view> ... /view> [代码] wxss [代码].waterfall { display: grid; grid-template-columns: repeat(2, 1fr); // 指定两列，自动宽度 grid-gap: 0.25em; // 横向，纵向间隔 grid-auto-flow: row dense; // 是否自动补齐空白 grid-auto-rows: 20px; // base高度，grid-row基于此运算 } .waterfall .item { width: 100%; background: #222; color: #ddd; } .waterfall .item:nth-of-type(3n+1) { grid-row: auto / span 5; } .waterfall .item:nth-of-type(3n+2) { grid-row: auto / span 6; } .waterfall .item:nth-of-type(3n+3) { grid-row: auto / span 8; } [代码] 效果 [图片] 基础版的问题看看上面的css是如何使用grid实现 [代码].waterfall .item:nth-of-type(3n+1) { grid-row: auto / span 5; } [代码] 上述代码指定[代码]1,4,7,10...[代码]等item的高度，[代码]auto[代码]为grid自动设置该item的起始位置，[代码]span 5[代码]则指定该item的高度为[代码]grid-auto-rows * 5[代码], [代码]grid-auto-rows[代码]在CSS的设定中为20px，在源码中我做了说明，它是一个基础高度 [代码].waterfall .item:nth-of-type(3n+2) { grid-row: auto / span 6; } [代码] 上述代码指定[代码]2,8,11,14...[代码]等item的高度，[代码]auto[代码]为grid自动设置该item的起始位置，[代码]span 6[代码]则指定该item的高度为[代码]grid-auto-rows * 6[代码] [代码].waterfall .item:nth-of-type(3n+3) { grid-row: auto / span 8; } [代码] 上述代码指定[代码]3,6,12,15...[代码]等item的高度，[代码]auto[代码]为grid自动设置该item的起始位置，[代码]span 8[代码]则指定该item的高度为[代码]grid-auto-rows * 8[代码] 基础版虽然看上去基本符合我们的产品需求，但由css可以知道，它的问题是__高度固定__，但业务上我们并不确切知道每个item的高度及所包含的图片的高度。所以接下来我们要解决__动态高度__设定的问题，让每一个item都自动计算自己的高度，而不是通过CSS来手动指定 css变量登场微信小程序swiper的自适应高度小程序中使用css var变量，使js可以动态设置css样式属性上面两篇文章是之前写得关于css变量的一些巧妙的用法，css变量确实能够解决很多之前很棘手的问题，此时我脑海里面迸发出了一个绝佳的IDEA 仔细观察这段css [代码].waterfall .item:nth-of-type(3n+2) { grid-row: auto / span 6; } [代码] 唯一不确定的就是[代码]6[代码]，对，它应该是一个变量而不是一个恒量，它应该是一个与高度关联的比值，而我们可以通过css变量动态设置这个比值，它大概应该长这样 [代码]page{ --item-span: x // 需要使用setData设置x值 } .waterfall .item { grid-row: var(--item-span); } [代码] 考虑到需要设置每个item的高度，应该为每一个item设定独立的样式 [代码].waterfall{ --item-span-1: x; // 使用setData设置x值 --item-span-2: y // 使用setData设置y值 } .waterfall .item-1 { grid-row: var(--item-span-1); } .waterfall .item-2 { grid-row: var(--item-span-2); } [代码] 原理到此我们就可以讲通如何实现的原理了注意：下面的例子使用内联样式代替上面的样式设定，因为内联样式可以由JS动态输出模板 [代码] .../view> /view> .../view> /view> /page> [代码] Page [代码]Page({ data: { waterStyle: '', items: [...] }, onReady(){ let query = wx.createSelectorQuery().in(this) query.selectAll('.waterfall .item').boundingClientRect(ret=>{ let styleStr = ''; ret.forEach((ele, ii) => { let height = ele.height let span = parseInt(height/ 20) // 20 = grid-auto-row styleStr += `--item-span-${ii}: auto / span ${span};` }) this.setData({ waterStyle: styleStr }) }) } }) // 注释一 // 所有item的css变量合集 waterStyle /* xn在onReady方法中计算得出 --item-span-1: auto/span x1; --item-span-2: auto/span x2; --item-span-3: auto/span x3; ... */ [代码] 使用内联样式而不是.item-n [代码][代码]item元素使用内联样式，因为我们不确定item的数量。高度计算通过query我们可以获取所有item子元素的rect属性(长宽高…)，计算height属性与grid-auto-row的比值，即我们需要的设定值 waterStyle 参考上述代码的注释一(动态计算每一个item的span比值)，通过setData方法设置生效(设置在父级[代码]view.waterfall[代码]上)，如此grid会自动设置每一个item子元素的位置优化以上基本将如何使用grid实现瀑布流的原理阐述了一遍，实际代码中需要注意[代码]grid-auto-row[代码]值的设定，在我们的项目中省略了此项css属性的设置，即span比值实际是由[代码]height/grid-gap[代码]得出，反而效果更好，具体原因我也一脸懵逼，如果有知道的留言告诉我 [图片]

GitHub账号

选择需要上架的开放服务

案例类型