聊聊双列瀑布流

爱吃土豆丝呦
381 阅读2分钟

今天我们来聊聊实现一个双列瀑布流

效果展示

动画.gif

什么是双列瀑布流？

image.png

双列瀑布流布局是一种常见的网页设计布局，通常用于展示图片、文章或其他内容。当内容较多时，这种布局能够有效利用屏幕空间，创造出一种动态和流畅的视觉效果。

特点

  1. 两列布局：内容被分为两列，通常是左右对称，适合在较宽的屏幕上显示。
  2. 不规则高度：每个内容项的高度可以不同，类似于瀑布流的效果，内容项从上到下排列，形成自然的流动感。
  3. 响应式设计：在不同屏幕尺寸上，列数和内容排列方式可以自动调整，以适应设备的宽度。

image.png

实现

首先我们想一下这个要什么实现呢？

实现的方式有很多种，这里我们讲一种，通过js动态计算高度去实现

  • 首先我们准备两列用于做双列
<div class="masonry">
     <div class="column" id="left"></div>
     <div class="column" id="right"></div>
 </div>

接下来我们就需要往这里里面去插方块了

插方块的逻辑其实很容易想到，那不就是那边高度矮就将方块插入到那边吗？

逻辑有了，我们说干就干

首先写一个创建随机高度item的方法

function createItem(index) {
     const div = document.createElement('div');
     div.className = 'item';
     const height = Math.floor(Math.random() * 100 + 80); // 80 ~ 180
     div.style.height = `${height}px`;
     div.innerHTML = `<h4>方块 ${index}</h4><p>高度：${height}px</p>`;
     return div;
}

接下来我们就剩下往双列表里插入数据了

 function addItem(index) {
     const item = createItem(index);
     document.body.appendChild(item);
     setTimeout(() => {
         const leftHeight = left.offsetHeight;
         const rightHeight = right.offsetHeight;
         if (leftHeight <= rightHeight) {
             left.appendChild(item);
         } else {
             right.appendChild(item);
         }
     }, 0);
 }

function addItem(index) {
    const item = createItem(index);
    document.body.appendChild(item);
 }
  1. function addItem(index) ：定义一个名为 addItem 的函数，接受一个参数 index，通常表示项目的索引或标识符。
  2. const item = createItem(index); ：调用 createItem 函数，生成一个新的项目（item），并将其赋值给变量 item。
  3. document.body.appendChild(item); ：将生成的项目暂时添加到 document.body 中。这是为了确保项目在 DOM 中可见。
setTimeout(() => {
    const leftHeight = left.offsetHeight;
    const rightHeight = right.offsetHeight;
}
  1. setTimeout(() => { ... }, 0); ：使用 setTimeout 将后续代码放入事件队列，以确保在 DOM 更新后执行。这使得浏览器可以先渲染 DOM，再测量高度。
  2. const leftHeight = left.offsetHeight; ：获取左列（left）的当前高度。
  3. const rightHeight = right.offsetHeight; ：获取右列（right）的当前高度。
if (leftHeight <= rightHeight) {
        left.appendChild(item);
    } else {
        right.appendChild(item);
    }
}, 0);
  1. if (leftHeight <= rightHeight) { ... } ：判断左列的高度是否小于或等于右列的高度。
  2. left.appendChild(item); ：如果左列较短，将新项目添加到左列。
  3. right.appendChild(item); ：如果右列较短，将新项目添加到右列。

接下来执行循环将item插入到双列

   for (let i = 1; i <= 20; i++) {
            addItem(i);
}

这样我们就成功实现了双列瀑布流

总结

通过上述步骤，我们成功实现了一个双列瀑布流布局。该布局能够动态地根据内容高度将项目插入到适当的列中，保持视觉上的平衡与美观

avatar
文章
阅读
粉丝