前端之masonry(图片瀑布流插件)
加载代码:
1
2
|
|
解释:很简单,就是把下载之后的脚本文件嵌入到你想使用瀑布流形式的页面中,注意文件的名称与路径,根据你自己的实际情况修改。
2,页面代码
1
2
3
4
5
6
7
8
|
< div id = "masonry" class = "container-fluid" > ... </ div > |
解释:把每个小内容块放在一个拥有相关类的容器里,然后把所有的内容块放在一个大的容器里,这里我们把内容块图片放在一个拥有 .box 类的 <div> 标签里,然后把他们又使用带有 #masonry ID 的 <div> 里面,一会儿我们会用 #masonry ID 和 .box 类来触发使用瀑布流。
3,样式代码
1
2
3
4
5
6
7
8
9
10
11
|
.container-fluid { padding : 20px ; } .box { margin-bottom : 20px ; float : left ; width : 220px ; } .box img { max-width : 100% } |
解释:针对第二步的页面代码,我们需要添加一点样式,.box 类我们添加了浮动属性,还设置了他的宽度。
4,在页面中启用瀑布流形式的脚本代码
1
2
3
4
5
6
7
8
9
10
|
$( function () { var $container = $( '#masonry' ); $container.imagesLoaded( function () { $container.masonry({ itemSelector: '.box' , gutter: 20, isAnimated: true , }); }); });<br> |
解释:这里我们首先定位想使用瀑布流的大容器是什么,这里就是带有 #masonry ID 的 <div> 标签,在 var $container = $('#masonry'); 这行代码中定义。然后我们还要说明瀑布流里的每个内容块容器上共同的类是什么,这里就是带有 .box 类的 <div> 标签,在itemSelector : '.box', 这行代码中定义。
gutter: 20, 这行代码定义了内容块之间的距离是 20 像素,isAnimated: true, 这行代码可以打开动画选项,也就是当改变窗口宽度的时候,每行显示的内容块的数量会有变化,这个变化会使用一种动画效果。
不居中显示的解决方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
$( 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 ; } }); }); |
前端之masonry(图片瀑布流插件)的更多相关文章
- jQuery动态网格瀑布流插件Masonry
Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...
- jquery.masonry瀑布流插件的4个使用步骤
1.分别加载jquery插件与jquery.masonry插件两个文件 下载jquery插件:http://jquery.com也可以引用google的cdn外部jquery核心库JS文件下载jque ...
- 瀑布流插件|jquery.masonry|使用demo
Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说: 瀑布流插件的一个基本使用,附上基本功能的demo <html> <head> <me ...
- jQuery瀑布流插件masonry
项目要做荣誉证书的排版,宽度是统一的,但是高度不一致 采用瀑布流的效果来实现 默认先实现前15张,点击按钮再加载全部剩下的数据 效果图 首先是html部分,写好样式 <!-- 荣誉资质 --&g ...
- 基于.NetCore开发博客项目 StarBlog - (10) 图片瀑布流
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- 利用jQuery来扩展一个瀑布流插件
简单了解jQuery.fn.extend() jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法). (截图来自jQuery文档) 为了更清晰 ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- 8款实用的Jquery瀑布流插件
1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...
- jQuery插件之-瀑布流插件
jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...
随机推荐
- 算法 quick sort
// ------------------------------------------------------------------------------------------------- ...
- ajax——用ajax写用户注册
zhuce.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- 网页抓取信息(php正則表達式、php操作excel)
1.问题描写叙述 实现对固定网页上自己须要的信息抓取,以表格形式存储. 我是拿wustoj上的一个排行榜来练习的,地址:wustoj 2.思路 网页自己就简单学习了一下php,刚好用它来做点事情吧,我 ...
- 超简单CSS3实现圆角、阴影、透明效果
CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆角 CSS3实现圆角有两种方法. ...
- JAVA面试-HIBERNATE与 MYBATIS的对比
JAVA面试中问及HIBERNATE与 MYBATIS的对比,在这里做一下总结 我是一名java开发人员,hibernate以及mybatis都有过学习,在java面试中也被提及问道过,在项目实践 ...
- MyBatis-Spring 使用总结
说明:Java-based Config. 不是通过 mybatis 的 SqlSessionFactoryBuilder 来创建 SqlSessionFactory ,而是通过 mybatis-sp ...
- 【BZOJ】1641: [Usaco2007 Nov]Cow Hurdles 奶牛跨栏(floyd)
http://www.lydsy.com/JudgeOnline/problem.php?id=1641 这种水题无意义... #include <cstdio> #include < ...
- Spring_day02--Spring的aop操作
Spring的aop操作 1 在spring里面进行aop操作,使用aspectj实现 (1)aspectj不是spring一部分,和spring一起使用进行aop操作 (2)Spring2.0以后新 ...
- MVC框架图
http://www.cnblogs.com/zgynhqf/archive/2010/11/19/1881449.html MVC框架图 http://www.cnblogs.com/zhang ...
- 指针与C++基本原理
面向对象编程与传统的过程性编程的区别在于,OOP强调的是在运行阶段(而不是编译阶段)进行决策.运行阶段指的是程序正在运行时,编译阶段指的是编译器将程序组合起来时.运行阶段决策就好比度假时,选择参观那些 ...