JS 实现图片瀑布流布局

瀑布流 = 定宽 + 不定高 + 列内追加。本文用原生js代码实现完整布局、重排、防抖,不依赖任何库。

一、核心思路

  1. 计算列数 = 容器宽 ÷ 图片宽
  2. 维护数组 colH[] = 每列当前高度
  3. 每张图找 最小高度 那一列塞进去
  4. 更新 colH[col] += 图片高 + 间隙
  5. 窗口 resize → 防抖重新布局

二、核心代码速览

js 复制代码
// ① 定宽
const imgW = 220                                                    
const container = document.getElementById('container')

// ② 列数 & 间隙
function cal() {                                                    
  const cw = container.clientWidth
  const cols = Math.floor(cw / imgW)
  const space = (cw - cols * imgW) / (cols + 1)
  return { cols, space }
}

 // ③ 布局函数
function setPos() {                                                
  const { cols, space } = cal()
  const colH = new Array(cols).fill(0)                              

  // 列高数组
  Array.from(container.children).forEach(img => {
    const minH = Math.min(...colH)
    const col = colH.indexOf(minH)
    img.style.top = minH + 'px'
    img.style.left = (col + 1) * space + col * imgW + 'px'
     // 更新列高
    colH[col] += img.height + space                               
  })

  // 撑开容器
  container.style.height = Math.max(...colH) + 'px'                
}

 // ④ 动态插入
function createImgs() {                                            
  for (let i = 0; i <= 40; i++) {
    const img = new Image()
    img.src = `../img/${i}.jpg`
    img.style.width = imgW + 'px'
    // 每张图加载完就排
    img.onload = setPos                                            
    container.appendChild(img)
  }
}

let timeId = null
// ⑤ 防抖重排
window.onresize = () => {                                           
  clearTimeout(timeId)
  timeId = setTimeout(setPos, 500)
}

// ⑥ 启动
createImgs()                                                        

三、关键点解读

  • 定宽不定高:imgW 固定,height 由图片本身决定
  • 列高数组:colH[col] 永远保存当前列的累计高度
  • DOM 移动:appendChild 不会重复插入,只做位置重排
  • 防抖:500 ms 内多次 resize 只执行最后一次,避免卡顿

四、性能 & 扩展

  • 零依赖:gzip < 1 KB,适用于任何老项目
  • 可异步:把 createImgs 换成 fetch 即可接入后端分页
  • 可响应:把 imgW 换成百分比,cal() 里用 clientWidth * ratio 即可自适应
相关推荐
web打印社区5 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗5 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长5 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅6 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_6 小时前
Chrome开发者工具
前端·chrome
YiHanXii6 小时前
this 输出题
前端·javascript·1024程序员节
Dream it possible!6 小时前
LeetCode 面试经典 150_链表_合并两个有序链表(58_21_C++_简单)
leetcode·链表·面试·1024程序员节
楊无好6 小时前
React中ref
前端·react.js
维他命Coco6 小时前
js常见开发学习
javascript
程琬清君6 小时前
vue3 confirm倒计时
前端·1024程序员节