流式布局的使用方法--Masonry
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的更多相关文章
- 流式布局&固定宽度&响应式&rem
我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法,例如:流式布局.限死宽度,还有就是通过响应式来做,但是这些方案都不是最佳的解决方法. 1.流式布局: ...
- 自定义View(三)--实现一个简单地流式布局
Android中的流式布局也就是常说的瀑布流很是常见,不仅在很多项目中都能见到,而且面试中也有很多面试官问道,那么什么是流式布局呢?简单来说就是如果当前行的剩余宽度不足以摆放下一个控件的时候,则自动将 ...
- Android 自定义View修炼-Android中常见的热门标签的流式布局的实现
一.概述:在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何 自定义一个类似热门标签那样的流式布局吧(源码下载在下面最后给出哈) 类似的 ...
- 转:Java图形化界面设计——布局管理器之FlowLayout(流式布局)其他请参考转载出处网址
http://blog.csdn.net/liujun13579/article/details/7771191 前文讲解了JFrame.JPanel,其中已经涉及到了空布局的使用.Java虽然可以以 ...
- 自定义ViewGroup 流式布局
使用 public class MainActivity extends Activity { @Override protected void onCreate(Bundle sav ...
- Android流式布局实现
查看我的所有开源项目[开源实验室] 欢迎增加我的QQ群:[201055521],本博客client下载[请点击] 摘要 新项目用到了一种全新布局----Android标签流式布局的功能,正好一直说给大 ...
- Java图形化界面设计——布局管理器之FlowLayout(流式布局)
一.布局管理器所属类包 所属类包 布局管理器名称 说明 Java.awt FlowLayout(流式布局) 组件按照加入的先后顺序按照设置的对齐方式从左向右排列,一行排满到下一行开始继续排列 Bord ...
- RecyclerFlexboxLayoutManagerDemo【使用FlexboxLayoutManager实现流式布局】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 FlexboxLayout是一个Google 开源的库项目,它将CSS Flexible Box Layout Module的类似功 ...
- RV LayoutManager 流式布局 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
随机推荐
- iOS:CoreData数据库的使用四(数据库和UITableViewController以及NSFetchedResultsController一起使用)
CoreData数据库虽然可以和tableview或者UITableViewController一起使用将数据显示在表格上,但是在准备数据的时候,这种方式需要用一个可变数组来装从数据库一次性取出来的所 ...
- leetcode mock Shuffle an Array
1. shuffle算法: http://www.cnblogs.com/huaping-audio/archive/2008/09/09/1287985.html 注意:我们一般用的是第二种swap ...
- [Python爬虫] 之五:Selenium 处理滚动条
selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了. 当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见的.这时候需要借助滚动条来拖 ...
- 转: SVN使用教程总结(图文丰富,相当详细)
转自:http://www.cnblogs.com/armyfai/p/3985660.html SVN使用教程总结 SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生 ...
- 机器学习-特征选择 Feature Selection 研究报告
原文:http://www.cnblogs.com/xbinworld/archive/2012/11/27/2791504.html 机器学习-特征选择 Feature Selection 研究报告 ...
- CLS(公共语言规范)的CLSCompliant(跨语言调用)
.net的一个很重要的特性就是跨语言的编程,用C#写的dll可以在VB.net里调用,例如:用C#写的一个类,编译到dll中,然后在VB.net中调用: using System;namespace ...
- [Compose] 9. Delay Evaluation with LazyBox
We rewrite the Box example using lazy evaulation. Here is Box example: const Box = (x) => ({ map: ...
- java程序设计题库
选择题 答题要求:单选题,每题只有一个正确答案,选择正确给分,不正确不给分. 1. 下面( A )数据类型可用于main()方法中传递的参数 A.String B.Integer C ...
- Android应用更新自动检测下载
由于Android项目开源所致,市面上出现了N多安卓软件市场.为了让我们开发的软件有更多的用户使用,我们需要向N多市场发布,软件升级后,我们也必须到安卓市场上进行更新,给我们增加了工作量.因此我们有必 ...
- Python list添加新元素
append()和insert() 添加新元素现在,班里有3名同学:>>> L = ['Adam', 'Lisa', 'Bart']今天,班里转来一名新同学 Paul,如何把新同学添 ...