JavaScript瀑布流 互动版

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

动态加载图片

得到上一讲返回来的true之后,就可以用JavaScript执行在Html DOM中创建元素节点,然后追加元素节点,将Json字符串中的图片数据源动态添加到页面中

  1. 在函数中用for循环历遍Json字符串中的所有图片
  2. 在for循环中首先获取id="container"的整个大的div容器
  3. 创建class="box"div子节点,将子节点作为根元素用parent.appendChild();方法添加到id="container"div容器中

  4. 创建_class="boximg"div子节点,将子节点作为根元素用parent.appendChild();方法添加到class="box"div

  5. 创建图片子节点document.createElement("img");设置图片的路径
    _src = "../images/" + imgdata.data[i].src;将图片节点作为根元素用parent.appendChild();方法添加到class="boximg"div
  6. 不断地循环Json字符串中的所有图片,将有图片都加载到页面中

动图添加实例