如何使用jquery.masonry实现瀑布流效果-创新互联-创新互联重庆分公司网站建设

解释：把每个小内容块放在一个拥有相关类的容器里，然后把所有的内容块放在一个大的容器里，这里我们把内容块图片放在一个拥有 .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实现瀑布流效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章标题：如何使用jquery.masonry实现瀑布流效果-创新互联
分享地址：http://cxhlcq.com/article/dshppd.html