android瀑布流插件,jQuery瀑布流插件 Masonry
插件描述:用jQuery Masonry 插件创建瀑布流式的页面
我们可以使用 jQuery 的 Masonry 插件来实现这种页面形式,下面介绍一下方法。
1,分别下载 jQuery 与 Masonry ,然后把他们都加载到页面中使用。
加载代码:
解释:很简单,就是把下载之后的脚本文件嵌入到你想使用瀑布流形式的页面中,注意文件的名称与路径,根据你自己的实际情况修改。
2,页面代码
...
解释:把每个小内容块放在一个拥有相关类的容器里,然后把所有的内容块放在一个大的容器里,这里我们把内容块图片放在一个拥有 .box 类的
3,样式代码.container-fluid {
padding: 20px;
}
.box {
margin-bottom: 20px;
float: left;
width: 220px;
}
.box img {
max-width: 100%
}
解释:针对第二步的页面代码,我们需要添加一点样式,.box 类我们添加了浮动属性,还设置了他的宽度。
4,在页面中启用瀑布流形式的脚本代码$(function() {
var $container = $('#masonry');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.box',
gutter: 20,
isAnimated: true,
});
});
});
解释:这里我们首先定位想使用瀑布流的大容器是什么,这里就是带有 #masonry ID 的
gutter: 20, 这行代码定义了内容块之间的距离是 20 像素,isAnimated: true, 这行代码可以打开动画选项,也就是当改变窗口宽度的时候,每行显示的内容块的数量会有变化,这个变化会使用一种动画效果。
(感谢网友阿富)提供不居中显示!
我的一个笨方法:$(function() {
var $objbox = $("#masonry");
var gutter = 25;
var centerFunc, $top0;
$objbox.imagesLoaded(function() {
$objbox.masonry({
itemSelector: "#masonry > .box",
gutter: gutter,
isAnimated: true
});
centerFunc = function() {
$top0 = $objbox.children("[style*='top: 0']");
$objbox.css("left", ($objbox.width() - ($top0.width() * $top0.length + gutter * ($top0.length - 1))) / 2).parent().css("overflow", "hidden");
};
centerFunc();
});
var tur = true;
$(window).resize(function() {
if (tur) {
setTimeout(function() {
tur = true;
centerFunc();
},
1000);
tur = false;
}
});
});
android瀑布流插件,jQuery瀑布流插件 Masonry相关推荐
- 页面打印插件 jquery.jqprint.js 插件使用实例
页面打印插件 jquery.jqprint.js 插件使用实例 jquery.jqprint.js 插件下载 jqprint 是一个基于jQuery编写的页面打印的一个小插件,可以对页面指定元素的内容 ...
- html流式布局插件,Jquery瀑布流网格布局插件
插件描述:一款简单且高度可定制的jQuery瀑布流网格布局插件.通过该瀑布流网格插件你可以动态添加和删除各种尺寸的图片,定义图片宽度,设置网格的列数,或使用流式布局方式,甚至还可以通过URL动态添加图 ...
- html 评分五角星的插件,jquery五角星评分插件示例分享
jQuery五角星评分插件 #rating_cont { background: #1E1D1C url(images/rating_background.jpg) top left no-repea ...
- html 水印插件,jquery图片水印插件
Img2Blob.js是一款可以为图片添加自定义水印的jquery插件.该jquery图片水印插件可以将图片转换为blob对象,然后为其添加自定义水印效果. 使用方法 在页面中引入jquery和img ...
- 风琴html插件,jQuery垂直手风琴插件
这款jQuery手风琴插件中使用了一个jQuery鼠标滚轮插件jQuery Mousewheel Plugin,这个插件使我们可以用鼠标滚动来浏览手风琴效果. 插件中精美的插图来自于花瓣. HTML ...
- html picker插件,jQuery元素选择器插件-multiPicker
一款jQuery元素选择器插件-multiPicker,可以用于星期.月份.语言等小范围的选择,有多种不同的选择方式,演示效果了可以自由体验,个人觉得实用性还是挺强的,喜欢的就收下吧. 查看演示 下载 ...
- html页面如何引入表情插件,jquery动画表情插件
jquery.mb.emoticons.js是一款jquery动画表情插件.它允许你通过面板拾取某个表情符号,然后可以通过这些表情相应的关键字符号将它们转换为gif动画表情. 使用方法 在页面中引入j ...
- ajax瀑布流插件,jQuery瀑布流无限加载插件:jquery.falless.js
慌慌张张,匆匆忙忙,为何生活总是这样? 难道说,我的理想,就是这样度过一生的时光?........... 真的是一年一年飞逝而去,而人的一生,又有几个一年? 第一个四年即将结束,得到了什么?又失去了什 ...
- html 图片自动切换插件,jquery图片切换插件
/** * 图片切换插件 * Dependence jquery-1.7.2.min.js **/ (function ($) { //调用方式 $('#silder').imgSilder({s_w ...
- html map插件,jQuery谷歌地图插件maplace.js
插件描述:Maplace.js帮助你嵌入你的网站,谷歌地图,快速创建标记和控制菜单在地图上的位置. 非常小的谷歌地图jQuery插件 Maplace.js帮助你嵌入你的网站,谷歌地图,快速创建标记和控 ...
最新文章
- 主流NoSQL及应用场景详解
- mongodb的简单使用
- 又美又飒!这位985大学小姐姐,堪称今年最强博士后!
- iOS 新特性分列式 之 iOS 8.x - 主要内容:应用扩展、手动对焦、Size Class
- 计算机与操作系统小结
- angularjs增删改查数据_MongoDB数据读写操作(增删改查)总结
- 阿里云 wdcp面板后台控制安装
- Android Studio下导出jar包和aar包
- oracle数据库常用的函数总结
- 单龙芯3A3000-7A1000PMON研究学习-(10)撸起袖子干-pmoncfg Bonito 干了什么?(这是make cfg的部分)
- android caj转word,caj转换成word的方法(亲测有效的方法)
- DDos防护系列之2--DDos防御策略
- 【Linux集群教程】11 集群监控 - Zabbix 搭建
- 江苏省职称计算机word2003教材,[205]Word 2003中文字处理 考试大纲
- 飘逸的python - 赛程表算法
- 软件企业税收优惠政策
- jQuery —— 元素绑定单击事件(click),但是双击该元素也能触发单击事件,同时会触发两次单击事件的问题
- 在360新员工入职培训上的讲话
- Ubuntu系统进行复制粘贴文件显示没有权限的解决办法
- linux蓝牙书籍,Linux蓝牙从入门到精通(BR/EDR)Baseband Introduction(一)General Description...
热门文章
- 【原创】2019.08.15 模拟赛 ※ [USACO19]Left Out / [USACO19]Cow Steeplechase II / bzoj 4972 小Q的方格纸
- IDEA鼠标光标变黑块问题解决
- Eclipse常用便捷设置
- 转:如何在艰难时期留住好员工
- ie8位16进制色转换工具
- 简单的动画(梦幻西游)
- 大二学生基于Html+Css+javascript的网页制作——动漫设计公司响应式网站模板 (10个页面)
- unity 引用 移动mm 支付sdk
- 【原】移动web页面给用户发送邮件的方法 (邮件含文本、图片、链接)
- web网页设计期末课程大作业:基于HTML+CSS+JavaScript个人书画作品展示HTML模板(6页)