整理了js实现图片瀑布流效果的步骤

• js实现瀑布流效果步骤
  • 写出基本的HTML内容
    • 加入一些css样式
      • 效果一：将宽度固定化（每一行放的图片个数相同）
        • js方法一：要得到父节点（放置主体内容的div盒子）下的子节点（承载图片的div盒子）个数
          • 先得到主体div里面所有内容（使用“*”获取里面所有节点的class名称），再通过if判断语句得到承载图片的div放进数组中
          • 再获取到屏幕的宽度，再除以图片的宽度就能得到每一行能放下的图片个数（再通过Math.floor()函数向下取整来处理得到的值）
          • 最后再在js 更改css样式中更改主体内容div的宽度（等于每张图片*一行放的图片个数），在通过margin：0 auto；让其居中
      • 效果二：每一行的下一行中的第一张图片应该放在上一行的最短图片下
        • 先判断每一排的图片高度谁最短（先得到每一排他图片的高度，在通过Math.min()函数判断最小值）
        • 再得到最矮图片距屏幕左侧的值（offsetLeft）），那这样就得到最矮图片下发的位置，再通过更改css样式改下一张图片的布局，和位置
        • 最后再将最矮图片的高度，和其下方图片的高度相加当成一张图片的高度，那这样再下一张图片就到第二矮的图片的下方
      • 效果三：图片能无限加载
        • 先监听页面的滚动条
        • 当最后一张的图片出现时开始加载图片
          • 先得到最后一张图片
          • 再得到其距顶部的高度（offsetTop），和未被加载出部分被加载出来的高度（scrollTop），和屏幕的高度（clientHeight）
          • 再判断当clientHeight+scrollTop大于offsetTop就可以加载图片了
          • 再写一个json储存图片数据
          • 最后再通过创建节点，和添加节点，将json数据中的图片添加进去