瀑布流jquery-jQuery.masonry大瀑布流疗效 - 个人文章 - SegmentFault 思否

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

上面，稍后我们将使用 #masonryID 和 .box 类来触发瀑布的使用。

4.初始化瀑布插件的jquery脚本代码

$(function(){
 var $container = $('#masonry');
 $container.imagesLoaded( function(){
  $container.masonry({
   itemSelector : '.box',
   gutterWidth : 20,
   isAnimated: true,
  });
 });
});

说明：这里我们首先找到我们想要使用大瀑布的大容器，这里是带有#masonryID的容器

标签在 var$container=$('#masonry'); 中定义一行代码。之后瀑布流jquery，我们还将解释瀑布中每个内容块容器上的公共类是什么，这里是 .box 类

标签定义在itemSelector:'.box'这行代码中。 gutterWidth: 20，这行代码定义了内容块之间的距离为20像素，isAnimated: true，这行代码可以打开动画选项，即改变窗口长度时，每行显示的内容块数量还有将会有一个改变，这个改变将使用动画效果。

演示下载地址 Great Falls

以上就是本文的全部内容，希望对您的学习有所帮助瀑布流jquery，也希望您多多支持后端开发者。

后端开发者 » jQuery.masonry 大瀑布疗效_儿歌_后端开发者

64K