世界这么大,只有四天假.
今天拐回头再看假期前写的两列瀑布流,发现了一个严重的问题.
虽然我用了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;