JavaScript瀑布流 互动版

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

获取图片

使用float布局有个缺点,当浏览器窗口的大小改变时,在页面中的图片会适应窗口来重新排列布局会带来一些不必要的麻烦,而这种效果应该使用响应式布局来实现。从本节课开始就是用JavaScript布局和改变Html中的一些样式和布局。本节操作是使用JavaScriptwindow对象来获取设备窗口的宽度和图的宽度,最终获得摆放图片的列数,但是在此之前要先获得所有的图片

操作步骤详解

  1. 先通过函数_imglocation("container","box");来获取所有的图片,并且传入参数containerbox
  2. 在函数中用document.getElementById("");`获container所对应的div元素,
  3. 再调用另一个函数 _get_childelement("","") ,来获取所有的box所对应的div元素,在函数中首先定义一个数组_contentarray = [];,通过container.getElementsByTagName("*");获取container对应div的所有子元素,并储存到数组_allcontent[]中,此时历遍_allcontent[]数组用_allcontent[i].className == box做一个判断,将className == box的放入数组_contentarray = [];中并返回_contentarray = [];数组。

获取图片