当前位置：首页 > 网页特效 > 其他

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

分类：其他日期：2024-05-14 点击(1) 评论(0)

简介

##### 使用方法
在页面中引入jQuery和imagesloaded.pkgd.min.js、fluid.jquery.js文件。

```html
<script src="jquery.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>              
<script src="js/fluid.jquery.js"></script>    
```          
#####  HTML结构
该瀑布流网格布局的基本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样式，这些样式是可以修改的，根据需要自行定义。

```html
.container {
    width: 600px;
    position: relative;
}
 
.item {
    position: absolute;
}
 
.item img {
    display: block;
    width: 100%;
}     
```           
#####  初始化插件
在页面加载完毕之后通过下面的方法来初始化该瀑布流图片网格布局插件。

```html
var fluid;
imagesLoaded( $('.container'), function() {
    fluid = new $('.container').fluid({col: 3, spacingX: 20, spacingY: 20});
});
```
#####  动态添加图片
```html
var $items = [$('<div class="item"> <img src="images/1.jpg" alt=""> </div>')];
imagesLoaded( $items, function() {
    fluid.add($items);
});   
```             
#####  配置参数
|  名称 | 默认值  |描述|
| ------------ | ------------ | ------------ |
|col|无|必填参数。指定网格中一行有多少列|
|spacingX|10|两个网格元素之间的水平间距|
|spacingY|10|两个网格元素之间的垂直间距|

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果