最近遇到这么一个需求,需要在手机上做一个两列的瀑布流布局,后来就把这个问题研究了一下,做个记录。
一般来讲,这种布局可以分为两种情况:
-
图片的数量是一定的,不需要页面滚动到底部时,再动态加载图片,只需要将图片排成若干列
-
图片的数量的不定的,页面触底时,需要从远程加载图片。
前者使用css的方法即可解决,后者则需要js来帮忙。
css解法
一、CSS多列布局
当我们展示的图片数量一定时,可以优先采用css解法。其中一种方法是借助css的多栏布局:
.photos{
column-count: 3;
column-gap: 10px;
}
得到的效果如下:
<p>See the Pen <a href=\'https://codepen.io/imgss/pen/Kjmjmq/\'>Kjmjmq</a> by imgss<br /> (<a href=\'https://codepen.io/imgss\'>@imgss</a>) on <a href=\'https://codepen.io\'>CodePen</a>.<br />
二、flex布局
flex布局同样可以做到这一点,诀窍在于将flex-direction
设为column
;但是相对于多列布局,需要根据瀑布流的列数,计算一个合适的容器高度,不然可能会导致多出一行。如果你在下面的demo 中,看到了4列,不要怀疑,就是我计算的容器高度不合适导致的。。。
<p>See the Pen <a href=\'https://codepen.io/imgss/pen/XLRvmQ/\'>waterflow-flex</a> by imgss<br /> (<a href=\'https://codepen.io/imgss\'>@imgss</a>) on <a href=\'https://codepen.io\'>CodePen</a>.<br />
js解法
当图片需要动态插入时,上面的两种方法就不合适了,因为他们本质上是将图片按照纵向进行排列的。图片动态插入时通常我们希望图片是按横向插入到容器中的。这时候就需要js来帮忙了。首先,我们看看瀑布流和背包问题的关系。
瀑布流的基本思路是将一堆图片放到若干列中,列与列之间的高度比较均匀,而不会相差太大。假如我们要分成两列,那么,问题就变成了,从 n 张图片中挑出 m 张,使这 m 张图片的总高度尽量接近 n 张图片总高度的 1 / 2。于是这就变成了一个背包问题
01背包问题
背包问题是啥这里不做展开,说白了是将一个复杂的问题分解为几个简单的问题,大佬们讲的都比我好,网上也有各个语言版本的实现,不太了解的同学可以查看上面的链接。这里直接放一个函数
function dp(ws, vs, limit) {
let len = ws.length;
let tables = new Array(len).fill().map(x => [])
tables[-1] = new Array(limit + 1).fill(0);
for(let i = 0; i < len; i++) {
for (let w = 0; w <= limit; w++) {
if (ws[i] > w) {
tables[i][w] = tables[i-1][w]
} else {
tables[i][w] = Math.max(tables[i-1][w], tables[i-1][w-ws[i]] + vs[i])
}
}
}
// 回溯得到应该选哪些
let max = limit;
let selected = [];
for (let idx = len - 1; idx >= 0; idx--) {
if (ws[idx] <= max) {
let isSelected = tables[idx-1][max] < tables[idx-1][max-ws[idx]] + vs[idx]
if(isSelected) {
selected.push(idx);
max = max - ws[idx];
}
}
}
return selected;
}
有了这个解法之后,我们也就不难写出一个瀑布流布局。具体思路是:假设我们要做一个3列的瀑布流布局,那么可以不断从图片数组中选出一组图片,使图片的高度接近总高度的1/3,最终得到3组图片。下面是一个代码片段
// colCount 表示要生成几列
while(colCount--) {
// 获取被选出的照片索引
let idxs = dp(photoHeights, photoHeights, aver)
// 得到被选出的一组图片
let photoCol = photos.filter((p,idx) => idxs.includes(idx))
this.cols.push(photoCol)
photoHeights.forEach((v,i) => {
if (idxs.includes(i)) {
photoHeights[i] = null
}
})
}
下面这个demo就是按上面的思路实现的,可以拖动下面的滑块来改变列数,观察底部的间隙。在使用背包算法解决瀑布流问题时,一个需要我们注意的地方是,要将图片高度转化成整数。
<p>See the Pen <a href=\'https://codepen.io/imgss/pen/agwbgx/\'>waterflow-js</a> by imgss<br /> (<a href=\'https://codepen.io/imgss\'>@imgss</a>) on <a href=\'https://codepen.io\'>CodePen</a>.<br />
参考文章:https://www.cnblogs.com/ainyi/p/8766281.html
https://www.cnblogs.com/AndyJee/p/4543424.html
https://segmentfault.com/a/1190000012829866