JavaScript瀑布流 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

瀑布流实现方法

本章要介绍的是加载瀑布流的方法是,固定列数的浮动布局,根据你设备屏幕的宽度和加载图片的宽度来固定列数,之后又获取每一列图片的高度,将要加载的图片放在高度最小的那一列图片下面,循环数组不断的寻找高度最小的那一列图片,将图片放在下面实现基本的布局效果。然后再创建一个滚动条监听事件(当最后一张图片距顶的高度<屏幕的高度+滚动条滚动的距离)时,就触发我们在页面动态的添加图片的事件(用JavasSriptHtml DOM创建节点,并为其添加根元素)。

基本的操作步骤如下

  1. Html页面中创建承载图片的div
  2. 将准备的图片都加加载到页面中
  3. 为图片添加css样式
  4. 获取第一排每一列图片的高度
  5. 固定一排图片的宽度并且居中对齐
  6. 将图片放在第一排高度最小的列下面
  7. 改别图片高度并不断的循环获得高度最小的图片
  8. 滚动条监听事件
  9. 创建Json字符出模拟数据
  10. 动态的创建节点并为其添加根元素
  11. 调整动态图片的格式