所有分类
  • 所有分类
  • 最新发布
  • WordPress主题
  • WordPress插件
  • WordPress汉化
  • HTML5/模板
  • Code/特效
  • 瀑布流
  • 导航菜单

简约Masonry瀑布流jQuery网格布局插件

这是一款简单实用的类似Masonry瀑布流的jQuery图片网格布局插件。该Masonry瀑布流布局简单易用,它通过imagesloaded 来加载图片,并且可以非常方便的动态添加任意数量的图片到网格布局中。

使用方法:

在页面中引入jQuery 和imagesloaded.pkgd.min.js,fluid.jquery.js文件。

<script src="jquery.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>              
<script src="js/fluid.jquery.js"></script>

HTML 结构:

该瀑布流网格布局的基本HTML结构如下:

<div class="container">
  <div class="container_inner">
    <div class="item">
      <img src="images/1.jpg" alt="">
    </div>
    <div class="item">
      <img src="images/2.jpg" alt="">
    </div>
    <div class="item">
      <img src="images/3.jpg" alt="">
    </div>
    <div class="item">
      <img src="images/4.jpg" alt="">
    </div>
    <div class="item">
      <img src="images/5.jpg" alt="">
    </div>
    <div class="item">
      <img src="images/6.jpg" alt="">
    </div>
  </div>
  <p class="load">Fetching images</p>
</div>

CSS 样式:

可以为该瀑布流图片网格布局添加一些必要的CSS样式,这些样式是可以修改的,根据需要自行定义。

.container {
    width: 600px;
    position: relative;
}
 
.item {
    position: absolute;
}
 
.item img {
    display: block;
    width: 100%;
}

初始化插件:

在页面加载完毕之后通过下面的方法来初始化该瀑布流图片网格布局插件。

var fluid;
imagesLoaded( $('.container'), function() {
    fluid = new $('.container').fluid({col: 3, spacingX: 20, spacingY: 20});
});

无限加载:

var $items = [$('<div class="item"> <img src="images/1.jpg" alt=""> </div>')];
imagesLoaded( $items, function() {
    fluid.add($items);
});

配置参数:

名称默认值值描述
col必填参数。指定网格中一行有多少列
spacingX10两个网格元素之间的水平间距
spacingY10两个网格元素之间的垂直间距

原文链接:https://www.7zt.cn/207.html,转载请注明出处~~~

0
广告位招租

评论0

请先

疫情期间优惠活动!本站包年VIP,特惠价:58元;本站终身VIP,特惠价:88元。随着资源不断增多,随时提价!立即查看
显示验证码
没有账号? 注册  忘记密码?

社交账号快速登录