瀑布流布局的进阶之美：利用Column属性和JS封装实现瀑布流呈现

前端

2022-12-18 23:04:15

瀑布流布局进阶：利用column属性和JS封装实现视觉盛宴

瀑布流布局以其独特的展示方式，让网页内容如瀑布般自然流淌，带来赏心悦目的浏览体验。今天，我们将带你探索瀑布流布局的进阶之美，结合column属性和JS封装，打造更具视觉吸引力的网页设计。

column属性与瀑布流

column属性允许我们在CSS中定义多列布局，就像瀑布流的每一列一样。我们可以轻松指定列数和宽度，让内容自然填充其中。

JS封装数组处理

为了实现瀑布流布局，我们需要对内容数组进行特殊处理。瀑布流并不是简单的从上往下排列，而是按照列顺序填充。通过JS封装一个函数，我们可以将数组中的内容按照瀑布流顺序排列，形成多列数组。

将内容渲染到页面

处理好数组后，下一步就是将它们渲染到页面上。使用JavaScript动态创建元素，并按照瀑布流顺序将内容填充其中。这样，瀑布流效果就跃然页面之上。

实现示例

让我们用代码示例演示一下如何实现瀑布流布局：

<div id="content">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
  ...
</div>

.waterfall {
  column-count: 3;
  column-gap: 20px;
  column-width: 300px;
}

function waterfall(array) {
  const columns = [];
  for (let i = 0; i < array.length; i++) {
    const column = columns[i % columns.length] || [];
    column.push(array[i]);
    columns[i % columns.length] = column;
  }
  return columns;
}

const contentArray = document.querySelectorAll('#content .item');
const columns = waterfall(contentArray);
columns.forEach((column) => {
  const div = document.createElement('div');
  column.forEach((item) => {
    div.appendChild(item);
  });
  content.appendChild(div);
});