RowGrid.js横向图片瀑布流网格布局代码特效

RowGrid.js横向图片瀑布流网格布局代码特效

一款jQuery+rowGrid.js横向图片瀑布流网格布局代码,类似百度图片搜索结果列表的图片高度相等宽度自动横向排版的瀑布流插件。

使用方法
在页面引入相关CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* clearfix because of floats */
.container:before,
.container:after {
    content: "";
    display: table;
}
.container:after {
    clear: both;
}
.item {
  float: left;
  margin-bottom: 15px;
}
.item img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
}
.first-item {
  clear: both;
}
/* remove margin bottom on last row */
.last-row, .last-row ~ .item {
  margin-bottom: 0;
}

jquery代码

1
2
<script src="js/jquery.min.js"></script>
<script src="js/jquery.row-grid.js"></script>

文件信息:

    0

    发表评论