JS解析动态生成移动端瀑布流(两列)

世界这么大,只有四天假.

今天拐回头再看假期前写的两列瀑布流,发现了一个严重的问题.

虽然我用了window.onload方法,但是具体问题还是要具体对待.

window.onload适用于结构中已经存在的DOM元素,针对于元素中已有的需要加载异步数据(img中的src,或script中的src、css文件)时起作用,但对于我这次动态生成的img元素而形成的移动端瀑布流,反倒不起作用了.

所以,在此使用了图片的onload事件,即图片加载完成后,执行以下的JS代码,实现瀑布流效果,接下来代码证明一下.

效果图:

原理:

类似于扑克牌游戏“接竹竿”

左右两侧宽度一致,均占50%,瀑布流主要通过对比两侧的高度,谁的高度值小,那么图片先往短的一列续图,在图片循环中不断对比高度,完成瀑布似的图片铺陈

html部分:

/*只有左右两列啊*/
<div class="container">
    <div class="left">
    </div>
    <div class="right">
    </div>  
</div>

CSS部分:

  <style>
  .container{
    background-color: lightseagreen;
    margin:0 auto;
    width:100%;
    /* display: flex;