JavaScript瀑布流 互动版

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

获取最小高度图片

  1. 调用函数_min_image_locatin(decwidth,dcontent)其中参数_ decwidth是在上一节中,将返回的列数值
  2. 声明一个数组_box_heightarray[i]存放第一排所有图片的高度
  3. 用for循环历遍所有的图片,用_if(i<decwidth)做一个判断,获取第一排所有图片的高度

    _box_heightarray[i] = dcontent[i].offsetHeight; //取得第一排图片的高度

  4. 用函数_Math.min.apply(null, box_heightarray)获取第一排图片中高度最小的图片

  5. 调用一个函数_get_min_height(box_height_array, minheight)获取高度最小图片的位置,在函数中历遍所有图片将高度等于最小高度的图片返回
  6. 用JavaScript(DOM对象中的style属性)设置图片为绝对定位,和图片距顶的距离和距左的距离