Less中瀑布流宽度需用媒体查询配合百分比手动计算，如3列时写为(100% - 2rem) / 3，并用calc(~"")强制编译；推荐直接使用CSS column-count + column-gap实现，Less仅负责统一管理断点与gap变量。
Less里怎么用百分比算出瀑布流每列宽度
瀑布流本质是多列等宽+间隙固定，但列数随屏幕变化。Less没法运行时判断列数，所以得靠媒体查询配合百分比手动算——比如3列时每列(100% - 2 * gap) / 3，gap设为1rem就写成(100% - 2rem) / 3。
注意：Less的除法默认会转成CSS除法（如100% / 3直接输出），要强制计算得用括号包住整个表达式，否则编译后还是100% / 3，浏览器不认。
- 列数变化点建议选常见断点：
@media (min-width: 768px)切2列，@media (min-width: 1024px)切3列，@media (min-width: 1440px)切4列 - gap统一用
rem或em，别混用px，否则和百分比混合计算时容易失准 - 容器必须设
box-sizing: border-box，不然padding会撑破算好的宽度
如何用Less条件判断控制列数切换
Less没有运行时if，但可以用.when做“编译时分支”——它只在变量满足条件时才生成对应CSS。不过对瀑布流来说，这招其实用处有限，因为列数取决于屏幕宽度，不是编译时能确定的值。
真正常用的是把列数抽成变量，再配合媒体查询批量生成规则：
@col-count: 3;
@gap: 1rem;
<h1>waterfall {</h1><p>column-count: @col-count;
column-gap: @gap;</p><p>& when (@col-count = 2) {
width: calc(~"(100% - 1 <em> @{gap}) / 2");
}
& when (@col-count = 3) {
width: calc(~"(100% - 2 </em> @{gap}) / 3");
}
}</p>
但上面这种写法实际意义不大，因为@col-count是静态的，改一次就得重编译。更靠谱的做法是放弃.when，老实用媒体查询分段写。
为什么直接用CSS column-count比Less计算更稳妥
原生column-count + column-gap就能实现视觉瀑布流，而且浏览器自动处理换列、断行、内容截断。Less算出来的百分比宽度只是给float或inline-block用的老方案，现在早该淘汰了。
用column-count时要注意：
-
column-fill: balance必须显式设置，否则Chrome可能把内容全堆在第一列 - 子项不能设
break-inside: avoid以外的分页控制，否则会破坏列平衡 - 如果子项里有
position: absolute，它会脱离列布局，飞到容器左上角 - 想让某子项跨列？加
column-span: all，但仅支持块级元素，且父容器得是column-count启用状态
响应式瀑布流中Less最该干的事：统一管理断点与间距变量
Less真正的价值不在算宽度，而在集中维护那些重复出现的值。比如所有断点、所有gap、所有列数映射关系，写成变量后一处改，全局动。
示例：
@breakpoint-sm: 768px;
@breakpoint-md: 1024px;
@breakpoint-lg: 1440px;
@gap: 1.5rem;
<p>.waterfall {
column-gap: @gap;</p><p>@media (min-width: @breakpoint-sm) {
column-count: 2;
}
@media (min-width: @breakpoint-md) {
column-count: 3;
}
@media (min-width: @breakpoint-lg) {
column-count: 4;
}
}</p>
这样后续调gap或增删断点，只改变量就行。别试图让Less替你“智能推导”列数——它没那个能力，也轮不到它管。
真正难的是内容高度差异大时的视觉断裂，那得靠JS补位或者用grid-template-rows: masonry（目前仅Firefox支持），Less插不上手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
