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

最新推荐文章于 2024-08-19 17:04:41 发布

elephant230

最新推荐文章于 2024-08-19 17:04:41 发布

阅读量1.7k

点赞数 1

文章标签：前端移动端瀑布流原生JS

本文链接：https://blog.csdn.net/elephant230/article/details/89847510

版权

本文介绍了在前端移动端开发中，如何使用原生JS解决动态生成的图片瀑布流问题。由于window.onload不适用于动态元素加载，因此采用图片onload事件来确保图片加载完成后实现瀑布流效果。文章详细讲解了瀑布流的实现原理，通过比较两侧高度来动态布局图片，最终达到类似扑克牌游戏“接竹竿”的效果。

摘要由CSDN通过智能技术生成

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

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

虽然我用了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;

关注