jquery瀑布流网页布局插件_图片带阴影效果的瀑布流效果代码

最新推荐文章于 2025-06-12 09:58:37 发布

amohan

最新推荐文章于 2025-06-12 09:58:37 发布

阅读量90

点赞数

分类专栏：网站模版文章标签： jquery javascript 前端

原文链接：https://yy123.ink/frontDetail/11849

版权

网站模版专栏收录该内容

3170 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的响应式网格布局插件BlocksIt，该插件可以根据窗口大小调整列数和容器宽度，确保了良好的跨设备显示效果。

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

下载地址

相关jquery代码$(window).load( function() { $("#container").BlocksIt({ numOfCol: 5, offsetX: 8, offsetY: 8, blockElement: ".grid" }); }); //window resize var currentWidth = 1100; $(window).resize(function() { var winWidth = $(window).width(); var conWidth; if(winWidth < 440) { conWidth = 220; col = 1 } else if(winWidth < 660) { conWidth = 440; col = 2 } else if(winWidth < 880) { conWidth = 660; col = 3 } else if(winWidth < 1100) { conWidth = 880; col = 4; } else if(winWidth < 1320) { conWidth = 1100; col = 5; } else { conWidth = 1320; col = 6; } if(conWidth != currentWidth) { currentWidth = conWidth; $("#container").width(conWidth); $("#container").BlocksIt({ numOfCol: col, offsetX: 8, offsetY: 8 }); } });