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();

流式布局的使用方法--Masonry的更多相关文章

  1. 流式布局&固定宽度&响应式&rem

    我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法,例如:流式布局.限死宽度,还有就是通过响应式来做,但是这些方案都不是最佳的解决方法. 1.流式布局: ...

  2. 自定义View(三)--实现一个简单地流式布局

    Android中的流式布局也就是常说的瀑布流很是常见,不仅在很多项目中都能见到,而且面试中也有很多面试官问道,那么什么是流式布局呢?简单来说就是如果当前行的剩余宽度不足以摆放下一个控件的时候,则自动将 ...

  3. Android 自定义View修炼-Android中常见的热门标签的流式布局的实现

    一.概述:在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何 自定义一个类似热门标签那样的流式布局吧(源码下载在下面最后给出哈) 类似的 ...

  4. 转:Java图形化界面设计——布局管理器之FlowLayout(流式布局)其他请参考转载出处网址

    http://blog.csdn.net/liujun13579/article/details/7771191 前文讲解了JFrame.JPanel,其中已经涉及到了空布局的使用.Java虽然可以以 ...

  5. 自定义ViewGroup 流式布局

    使用 public class MainActivity extends Activity {     @Override     protected void onCreate(Bundle sav ...

  6. Android流式布局实现

    查看我的所有开源项目[开源实验室] 欢迎增加我的QQ群:[201055521],本博客client下载[请点击] 摘要 新项目用到了一种全新布局----Android标签流式布局的功能,正好一直说给大 ...

  7. Java图形化界面设计——布局管理器之FlowLayout(流式布局)

    一.布局管理器所属类包 所属类包 布局管理器名称 说明 Java.awt FlowLayout(流式布局) 组件按照加入的先后顺序按照设置的对齐方式从左向右排列,一行排满到下一行开始继续排列 Bord ...

  8. RecyclerFlexboxLayoutManagerDemo【使用FlexboxLayoutManager实现流式布局】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 FlexboxLayout是一个Google 开源的库项目,它将CSS Flexible Box Layout Module的类似功 ...

  9. RV LayoutManager 流式布局 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

随机推荐

  1. 每日一小练——Armstrong数

    上得厅堂.下得厨房,写得代码,翻得围墙,欢迎来到睿不可挡的每日一小练! 题目:Armstrong数 内容: 在三位的正整数中,比如abc.有一些能够满足a^3+b^3+c^3=abc的条件,也就是说各 ...

  2. Linux内核通知链模块

    通知链描写叙述 大多数内核子系统都是相互独立的,因此某个子系统可能对其他子系统产生的事件感兴趣. 为了满足这个需求,也即是让某个子系统在发生某个事件时通知其他的子系统.Linux内核提供了通知链的机制 ...

  3. 我的GTD起步

    最初因为工作进程漫无目的的逛网页,私人生活也一团乱麻,无法做自己想要的事情,这才开始接触个人管理和时间管理. 慢慢的也开始建立一套自己的体系,但是和之前改变不是很大,后来看了<小强升职记> ...

  4. .NET反编译之manager,base.AutoScaleMode修复

    使用反编译软件导出项目时,出现警告:设计器无法处理第X 行的代码:this.AutoScaleMode = AutoScaleMode.Font;方法"InitializeComponent ...

  5. WebView加载网页文件

    转自:http://www.2cto.com/kf/201108/101518.html WebView(网络视图)能加载显示网页,可以将其视为一个浏览器.它使用了WebKit渲染引擎加载显示网页,实 ...

  6. Tomcat 之 启动tomcat时 错误: 代理抛出异常 : java.rmi.server.ExportException: Port already in use: 1099;

    错误: 代理抛出异常 : java.rmi.server.ExportException: Port already in use: 1099; nested exception is:  java. ...

  7. UITextView 添加 pleaceholder

    UITextView 默认没有 pleaceholder属性: 我们可以通过多种方式添加 在UITextView的代理方法中写 - (void)textViewDidBeginEditing:(UIT ...

  8. 手机网站调试神器之chrome控制台

    现在真是一个信息化的时代,每个人手里都拿着一款智能机,上班下班走路坐车之余都会玩玩手机,上上网.于是作为广大网站媒体来说,争抢手机市场无疑是刻不容缓.对于我们Web前端工程师来说,了解并掌握手机编程的 ...

  9. KineticJS教程(5)

    KineticJS教程(5) 作者: ysm  5.事件响应 5.1.图形的事件响应 图形对象对事件的响应处理可以使用 on() 方法绑定事件类型和相应方法. On() 方法需要一个事件类型参数和相应 ...

  10. Ext.encode 与 Ext.decode .

    Ext.encode( Mixed o ) : String: json对象转换json字符串 Ext.decode( String json ) : Object: json字符串转换json对象 ...