聊聊双列瀑布流

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

效果展示

什么是双列瀑布流?

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

特点

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

实现

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

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

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

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

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

逻辑有了,我们说干就干

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

js 复制代码
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;
}

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

js 复制代码
 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);
 }
js 复制代码
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 中可见。
js 复制代码
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)的当前高度。
js 复制代码
if (leftHeight <= rightHeight) {
        left.appendChild(item);
    } else {
        right.appendChild(item);
    }
}, 0);
  1. if (leftHeight <= rightHeight) { ... } :判断左列的高度是否小于或等于右列的高度。
  2. left.appendChild(item); :如果左列较短,将新项目添加到左列。
  3. right.appendChild(item); :如果右列较短,将新项目添加到右列。

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

js 复制代码
   for (let i = 1; i <= 20; i++) {
            addItem(i);
}

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

总结

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

相关推荐
qb4 分钟前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖5 分钟前
极简三分钟ES6 - 类与继承
前端·javascript
虫无涯7 分钟前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
子兮曰8 分钟前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f8 分钟前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖9 分钟前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰12 分钟前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
NewChapter °17 分钟前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app
练习时长两年半的Java练习生(升级中)20 分钟前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web
vipbic35 分钟前
关于Vue打包的遇到模板引擎解析的引号问题
前端·webpack