如何使用jquery.masonry实现瀑布流效果-创新互联
这篇文章给大家分享的是有关如何使用jquery.masonry实现瀑布流效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联建站专业为企业提供樊城网站建设、樊城做网站、樊城网站设计、樊城网站制作等企业网站建设、网页设计与制作、樊城企业网站模板建站服务,十余年樊城做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。一、分别加载jquery插件与jquery.masonry插件
二、瀑布流局部样式代码
.container-fluid { padding: 20px; } .box { margin-bottom: 20px; float: left; width: 220px; } .box img { max-width: 100% }
解释:针对第二步的页面代码,我们需要添加一点样式,.box 类我们添加了浮动属性,还设置了他的宽度。
三、页面瀑布流布局html代码
解释:把每个小内容块放在一个拥有相关类的容器里,然后把所有的内容块放在一个大的容器里,这里我们把内容块图片放在一个拥有 .box 类的
标签里,然后把他们又使用带有 #masonry ID 的
里面,一会儿我们会用 #masonry ID 和 .box 类来触发使用瀑布流。
四、初始化瀑布流插件的jquery脚本代码
$(function(){ var $container = $('#masonry'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.box', gutterWidth : 20, isAnimated: true, }); }); });
解释:这里我们首先定位想使用瀑布流的大容器是什么,这里就是带有 #masonry ID 的
标签,在 var $container = $('#masonry'); 这行代码中定义。然后我们还要说明瀑布流里的每个内容块容器上共同的类是什么,这里就是带有 .box 类的
标签,在itemSelector : ‘.box', 这行代码中定义。gutterWidth : 20, 这行代码定义了内容块之间的距离是 20 像素,isAnimated: true, 这行代码可以打开动画选项,也就是当改变窗口宽度的时候,每行显示的内容块的数量会有变化,这个变化会使用一种动画效果。
文章题目:如何使用jquery.masonry实现瀑布流效果-创新互联
分享路径:http://scyanting.com/article/dshppd.html
感谢各位的阅读!关于“如何使用jquery.masonry实现瀑布流效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章题目:如何使用jquery.masonry实现瀑布流效果-创新互联
分享路径:http://scyanting.com/article/dshppd.html