浙江 杭州

简单的Masonry瀑布流jQuery图片网格布局插件

系统分类: 网页特效 - jquery插件 - jQuery布局 2017-03-23

人气1952

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款简单实用的类似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 必填参数。指定网格中一行有多少列
spacingX 10 两个网格元素之间的水平间距
spacingY 10 两个网格元素之间的垂直间距

查看演示
下载资源:2
下载资源
错误提交:

格式:zip 大小:224.30KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1885.html 非特殊说明,本文版权归原作者所有,转载请注明出处
简单的Masonry瀑布流jQuery图片网格布局插件

我当前G币余额:0 已下载次数:2

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

说点什么...(已有0 评论)