流式布局的使用方法--Masonry
2024-10-18 13:50:45
http://www.jq22.com/demo/masonry/
范例
css部分
body {
background-color: #c7cad0;
} .post_box {
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
font-size: 12px;
padding: 10px 8px;
width: 250px;
height: auto;
overflow: hidden;
margin-bottom: 10px;
position: relative;
z-index:;
} .container-fluid {
margin-right: 100px;
margin-left: 100px;
} .post_box img {
height: auto;
width: 234px;
}
<div class="container-fluid">
<div class="post_area" id="masonry">
<div class="post_box">
<a target="_blank" href="/upload/browser/photos/293"><img alt="图片加载失败" src="/upload/photo/20170302/thumbnail/9f22c32aca3949398cde54e807cb129e.jpg" /></a>
<div class="caption">
<a target="_blank" href="/upload/browser/photos/293"><h4>测试更新</h4></a>
<p>
作者: <span>管理员</span>
</p>
</div>
</div>
<div class="post_box">
<a target="_blank" href="/upload/browser/photos/292"><img alt="图片加载失败" src="/upload/photo/20170302/thumbnail/cda7b7218f704559a53b668c60f36b06.jpg" /></a>
<div class="caption">
<a target="_blank" href="/upload/browser/photos/292"><h4>test update</h4></a>
<p>
作者: <span>管理员</span>
</p>
</div>
</div>
window.onload = function(){
var $container = $('#masonry').masonry({
// options
itemSelector: '.post_box',
gutter:10,
isAnimated: true
});
};
//初始化图片流插件
var $container = $('#masonry').masonry({
// options
itemSelector: '.post_box',
gutter:10,
isAnimated: true
});
$('#masonry').masonry().append($items).masonry( 'appended', $items ).masonry();
最新文章
- 将jetty嵌入到应用中的简单案例
- Java以基础类库
- js操作json与字符串相互转换
- (转)win32Application和win32ApplicationConsole
- Linux MySQL 存储引擎详解
- system CPU占用率过高与91助手的关系
- JavaScript学习心得(二)
- 一起啃PRML - Preface 前言
- 【USACO 3.2.5】魔板
- mssql 返回表的创建语句
- akoj-1272-字母统计
- php网上支付易宝
- Nginx配置CI框架问题(Linux平台下Centos系统)
- 利用filter替换字符串中的空格
- JAVA核心技术I---JAVA基础知识(时间类)
- Ueditor设置默认字体、字号、行间距,添加字体种类(转)
- Ubantu 好玩以及有用的命令
- Windows7 VS2015 下编译 PythonQt3.2
- MySql概念(二)
- django面试二