js实现简单瀑布流效果

最新推荐文章于 2025-04-26 12:12:17 发布

call_m_py

最新推荐文章于 2025-04-26 12:12:17 发布

阅读量304

点赞数

分类专栏：前端文章标签： web前端 js

本文链接：https://blog.youkuaiyun.com/call_m_py/article/details/90694112

版权

前端专栏收录该内容

1 篇文章

订阅专栏

博客介绍了用JS实现简单瀑布流效果。作者因找插件不理想而选择自己实现，具体思想是建立两个放图片的div，通过图片距其父级div的高度，判断下一张图片放左侧还是右侧div，因项目要求不高未加其他效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js实现简单瀑布流效果

1.瀑布流，虽然是一种经典的前端效果，但经常不用都忘了它的写法。前些天需要时，一直忙着找插件，但插件并不是很友好，免费的达不到效果，花金币又感觉很不值。有时间还不如自己来，又是自己就随意写了一个，还好能勉强过关。

 var left_top=$(".left_div>div:last-child").offset().top
 var right_top=$(".right_div>div:last-child").offset().top
        if(left_top<=right_top){
               $(".left_div").append(img_info)
           }else{
               $(".right_div").append(img_info)
           }

具体思想就是建立两个用来放图片的div，通过图片距其父级div的高度，来判断下一张图片该放在左侧div中亦或是右侧div中。
当然由于项目要求不高，所以并没有加其他效果。