兼容IE8的响应式网格瀑布流布局jQuery插件

置顶免费 18  1776

jinjing VIP3 2017-02-25

下载所需金币：0 收藏

简要教程

Pinterest Grid是一款仿Pinterest网站的响应式网格瀑布流布局jQuery插件。该瀑布流插件使用简单，可以随父容器的大小自动调节网格布局，并且支持IE8+的IE浏览器。

使用方法

使用该瀑布流插件需要引入jQuery和pinterest_grid.js文件。

<script src="js/jquery.min.js">script>
<script src="js/pinterest_grid.js">script>                

HTML结构

该jQuery瀑布流布局插件使用下面的HTML结构。

<section id="demo">
  <article class="white-panel"> 
    <img src="1.jpg" alt="...">
    <h1><a href="#">Title 1a>h1>
    <p>Description 1p>
  article>
 
  <article class="white-panel"> 
    <img src="2.jpg" alt="...">
    <h1><a href="#">Title 2a>h1>
    <p>Description 2p>
  article>
 
  <article class="white-panel"> 
    <img src="3.jpg" alt="...">
    <h1><a href="#">Title 3a>h1>
    <p>Description 3p>
  article>
  ...
section>              

CSS样式

你需要为该瀑布流布局添加下面的一些必要的CSS样式。

#gallery-wrapper {
  position: relative;
  max-width: 100%;
  width: 100%;
}
img.thumb {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.white-panel {
  position: absolute;
  background: white;
  border-radius: 5px;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
  padding: 10px;
}
.white-panel h1 {
  font-size: 1em;
}
.white-panel h1 a {
  color: #A92733;
}
.white-panel:hover {
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  margin-top: -5px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}                

初始化插件

在页面DOM元素加载完毕之后，可以通过pinterest_grid()方法来初始化该瀑布流布局插件。

$("#gallery-wrapper").pinterest_grid();                

配置参数

该瀑布流布局插件有以下一些可用的配置参数。

no_columns：网格布局一行的列数。默认值为一行3个网格。
padding_x：网格在X轴方向的padding值。默认值为10像素。
padding_y：网格在Y轴方向的padding值。默认值为10像素。
margin_bottom：网格底部的margin值。默认值为50像素。
single_column_breakpoint：指定在视口多大时一行只显示一个网格。

没有任何评论

jinjing (青铜)

拥有的金币数 455金币 (16)粉丝 (32)源码

一切皆有可能！

加入微信群，不定期分享源码和经验

签到活跃榜连续签到送额外金币

所需金币：0

赚金币方法：

1. 注册就送5金币，发布源码，供别人下载赚取金币
2. 发布博客，发布问答，回复其他用户赚取金币
3. 自动充值或联系QQ1367251002客服人工充值

最近下载

9¾ ⃒⃘⃤眼成海却未蓝 2020-11-05

zhhanzhong@aliyun.com 2019-02-20

格式化记忆 2018-10-26

灯灯同学 2018-06-25

2017-11-20

LL 2017-11-20

銘нoнo..! 2017-11-14

玖月一十八 2017-10-30

笑瞰人生天字号 2017-10-09

张世烩 2017-09-22

最新系统: 学生选课系统+论文+数据库文件  23; springboot+vue准妈妈孕期交流平台系统带论文  608; springboot+vue汽车租赁系统带论文  364; springboot社区维修平台带论文  506; springboot职称评审管理系统带论文  354; springboot牙科诊所管理系统带论文  474; springboot家教管理系统带论文  593; springboot毕业生信息招聘平台系统带论文  160; springboot小区物业管理系统带文档  224; 高校图书馆座位预约系统+文档+运行视频  460

常用软件

jdk1.7

tomcat8.0

mysql

Navicat

Git

VsCode

TeamViewer