JavaScript瀑布流 互动版

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

固定宽度和居中对齐

前一节已经获取了图片,本节通过调用一个函数_getwidth(dparent, dcontent)来固定列数,其中dparentdcontent是传过来的两个参数,

  1. 在函数中先用_imgwidth = dcontent[1].offsetWidth;获得图片的宽度,
  2. 用 _winwidth = document.documentElement.clientWidth;获取当前设备的宽度
  3. 用Math.floor(设备的宽度/图片宽度)函数将结果转化为整数,即图片的列数
  4. 设置第一排图片的宽度=这个整数*图片宽度,即固定列数
  5. 用JavaScript(DOM中的style)设置图片居中对齐

固定宽度2