【JavaScript】瀑布流布局

等时钟成长

已于 2022-08-01 22:31:02 修改

阅读量1.6k

点赞数

分类专栏：前端 JavaScript HTML 文章标签： javascript 前端开发语言

于 2022-07-13 19:42:16 首次发布

本文链接：https://blog.csdn.net/pangji0417/article/details/125752614

版权

本文详细探讨了JavaScript实现的瀑布流布局，包括准备工作、CSS方案（如Flexbox和CSS Grid）、基于布局的改进（如贪心算法、懒加载和动态规划）。通过实例解析，阐述了如何处理布局中的各种挑战，如图片大小未知、极端高度列的优化，以及如何实现懒加载。文章还提及了使用动态规划优化布局的可能性，并提供了相关参考资料。

摘要由CSDN通过智能技术生成

瀑布流(waterfull)布局，也称作masonry。是一种被广泛应用的多图布局，尤其在移动端。对于一个网页，人类是习惯于横向定宽，垂直滚动来进行阅读的。在展示大量图片时，为避免杂乱无章，采用定宽定列的布局方式，可以促使浏览更加高效。

文章目录

最终效果

准备工作

开始之前，我们需要准备一些图片方便测试。本节使用canvasAPI 来程序化的生成测试图片。

`random`

封装生成随机数和随机颜色的方法

const random = Math.random;
const floor = Math.floor;

/**
 * 随机整数
 * @param {number} n
 * @returns [0, n)
 */
function intRand(n) {
   
  return floor(random() * n);
}

/**
 * 从范围[a, b)内随机
 * @param {number} a start
 * @param {number} b end
 * @returns [a, b)
 */
function rand(a, b) {
   
  if (b) {
   
    const diff = b - a;
    return a + intRand(diff);
  }
  return intRand(a);
}

/**
 * 随机HEX颜色
 */
function hexColor() {
   
  return (
    "#" +
    Array(6)
      .fill(0)
      .map(() => rand(16).toString(16))
      .join("")
  );
}

`canvas`

// 创建一个canvas
function createCanvas(width = 300, height = 150) {
   
  const canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  return canvas;
}

利用canvasAPI的toDataURL()方法，得到编码，用的时候赋值给<image>的src属性就好了。

/**
 * 生成随机彩色图片URL
 */
function randImage(
  text,
  width = rand(50, 150),
  height = rand(50, 150),
  bgColor = hexColor(),
  fontColor = "white"
) {
   
  const canvas = createCanvas(width, height);
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = bgColor;
  ctx.fillRect(0, 0, width, height);

  ctx.fillStyle = fontColor;
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.font = Math.min(width, height) / 2 + "px bold";
  ctx.fillText(text, width / 2, height / 2);

  return canvas.toDataURL();
}

测试randImage方法:

<img id="testImage"></img>
<script>
  document.getElementById("testImage").src = randImage('测试')
</script>

`map`

/**
 * 生成一个length大小的数组
 * @param {Number} length
 * @param {Function} func
 * @returns {Array}
 */
function map(length, func = i => i) {
   
  return Array.from({
    length }, (_, i) => func(i));
};