masonry 随笔

$.masonry( ‘layoutItems‘, items, isStill ){
// 容器调用masonry(子元素类标签,每个子元素,是否。。)
 msnry.layoutItems( items, isStill )
 }

https://yunpan.cn/cM6DMxSvt7YSN  访问密码 6278

https://github.com/TianYouH/masonry   模版

var mason = $(‘.grid‘).masonry({
// 设置itemSelector。指定子元素将被用作项目元素的布局
itemSelector: ‘.grid-item‘,

// 追加参与布局子元素
// stamp:"追加布局元素类";

// 列宽
columnWidth: 300,
// 元素的大小布局与响应百分比宽度。columnWidth这是列宽。不设置默认为第一个元素宽

//这个是列与列间距宽度
gutter: 50,

// 允许父容器居中显示。需为父容器添加margin: 0 auto;样式设置
// isFitWidth:true,

// true从左向右 false从右向左 水平方向,默认true
originLeft: false,

// true自上而下 false自下而上 垂直方向,默认true
originTop: false,

// 响应式布局使用
// 使用元素获取百分比设置
// columnWidth: ‘.grid-sizer‘,
// 按百分比设置位置
// percentPosition: true

// 禁止任何样式
// containerStyle: null,

// 窗口大小发生改变样式布局过渡时间。默认0.2
// transitionDuration: ‘0.2s‘,
// transitionDuration: 0,

// 子元素改变,所有子元素逐步过渡。设置为一个CSS时间格式, ‘0.03s‘,或者在毫秒数, 30.
// 默认值很快。 当发生事件回调该函数,即可重新排列
// stagger: "0.03s"

// 窗口大小改变是否重新排列。默认true
// resize: false

// 禁止布局初始化 默认true。false页面首次打开不布局,可通过事件执行布局
// initLayout: false

})
// 含有图片时,等图片加载结束在执行
 var $grid = $(‘.grid‘).masonry({
 itemSelector: ‘.grid-item‘,
 });
 $grid.imagesLoaded().progress( function() {
 $grid.masonry();
 });
mason.on( ‘click‘, ‘.grid-item‘, function( event ) {
// 删除子元素事件
mason.masonry( ‘remove‘, event.currentTarget ).masonry();
});

// 改变元素大小
// mason.on( ‘click‘, ‘.grid-item‘, function() {
// $( this ).width(400);
// mason.masonry();
// });

http://masonry.desandro.com/

时间: 2024-12-04 21:05:02

masonry 随笔的相关文章

C#博客随笔之六:数据绑定

这一篇随笔记录的是在完成程序中遇到的一些情况 首先要讲的是MVVM 所谓MVVM就是Model,View,ViewModel 下面是MVVM的优点(引用自百度百科): MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model),有几大优点1. 低耦合.视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变.2. 可重用性.你可以把一些视图

Abby's 学习php5随笔

2017.6.27 Abby's cakephp2 学习之旅 下载了XAMPP集成开发环境,然后配置其数据库,参考学习教程, 1.建立表单. 配置完信息如下,Cache Apache默认在windows下是system用户,所以权限最高,但xampp集成环境中的apache确是administor 如何更改apache用户为system 静默开发.(一种开发方法,番茄ToDo中的学霸模式有些相似) 如何设置.ctp的显示 http://cakephp2.local/posts/index怎么就可

java基础随笔 字符数据类型char的单引号

public class Love{ public static void main(String[] args){ System.out.println('*'+'\t'+'*'); System.out.println("*"+"\t"+"*") } } 运行结果   第一行为  93 第二行为  *        * 原因 第一行中'\t' 单引号  识别为字符数据类型char,char类型是可以运算的,在第一行中+做了运算符. 第二行&q

web前端学习随笔

好好算下来,学习web前端已有半个月了,这半个月来主要学习的是HTML和CSS部分,期间有困惑,也有解决困惑时的快感,所以想把这段时间感受到的一些东西记下来,因为内容比较杂,所以干脆叫随笔吧.这里面不会说前端的相关基础知识,只是说一些自己对前端的一些认识. html是用来控制页面结构的我曾经对这句话有过疑问,觉得html应该是控制页面内容的,为什么要说是控制页面结构的呢?在查看京东首页的代码时,我恍然大悟,html确实是定义页面内容的,但同时它也要控制页面的结构.举例来说,京东商品分类的div包

JavaWeb学习随笔

Servlet学习随笔 1.HttpServlet init(ServletConfig)------Servlet生命周期中的初始方法,默认情况是服务器创建后第一次访问这个Servlet时调用,可以修改配置信息,使其在服务器一创建时就被调用; 修改配置信息的方法-----在web.xml的<servlet>下添加<load-on-startup>x<load-on-startup>,x是正整数,越小表示优先级越高 url路径的配置,完全匹配>目录匹配>(.

想知道博客园随笔总阅读量吗?

我真的是闲的无聊了...,前提是你写的随笔总数少于等于40条. 0.在选项里设置一页显示40条随笔 1,打开自己的随笔列表:https://i.cnblogs.com/posts 2,在当前页面f12打开浏览器控制台 3,粘贴进去以下代码 var trs=document.querySelectorAll('#post_list tr td:nth-child(4)')//取得阅读量 atrs=Array.from?Array.from(trs):Array.prototype.slice.ca

随笔1104

随笔1104 一.变量定义 var a = 10; 如果定义小数或整数的变量,等号后面值直接写 如果定义字符串的变量,等号后面的值要加双引号或单引号 类型转换 parseInt(); 强制转换为整数 parseFloat();强制转换为小数 二.运算符表达式 1.数学运算符 + - * / % 百分号是取余 例:alert(a+b); alert(a%b); a除以b的余数 2.逻辑运算符 && 并 指两者都满足 || 或 指两者其中任何一个满足 ! 非 指强制变反 真变假 假变真 3.比

alpha发布(技术随笔)

昨天是班级里面每个小组要进行alpha演示,大家都很努力的去做自己的项目.我们nice!组没有演示自己的项目,只一点很惭愧,身为组员没有协助组长按时完成项目,这一点自己也感觉很抱歉,虽然每天感觉自己都有去做,但是效果非常不理想.看到天天向上组的连连看界面做的很好,有背景切换,主题,游戏的级别等做的很细心.先锋组的俄罗斯方块也不错,看到同学玩的那么开心就知道了,还有飞天小女警的礼物挑选真的很用心,这个idea就很新颖,而且完成的也很好,老师也说如果转换成手机app那就更方便使用了,市场很好. 这次

Masonry整理

Masonry整理 Masonry是以AutoLayout为基础的轻量级布局框架更加简化了整个约束系统 Masonry三方下载本文参考:    地址1    地址2    地址3    地址4 *Masonry有哪些属性 @property (nonatomic, strong, readonly) MASConstraint left;@property (nonatomic, strong, readonly) MASConstraint top;@property (nonatomic,