【jQuery动态网格瀑布流插件Masonry】的更多相关文章

jQuery动态网格瀑布流插件Masonry

Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonry则先垂直再横向排列元素,将下一个元素放置到上一个元素底部的网格中的下一个开发区域.这种效果可以最小化处理不同高度的元素在垂直方向的间隙. 在上图中大家可以看到,在网格布局中使用float来处理不同高度的元素会使得垂直方向的元素间间隔比较大,而使用Masonry处理后,间隔变小. 使用方法 引入核心…

jQuery瀑布流插件masonry

项目要做荣誉证书的排版,宽度是统一的,但是高度不一致 采用瀑布流的效果来实现 默认先实现前15张,点击按钮再加载全部剩下的数据 效果图 首先是html部分,写好样式 <!-- 荣誉资质 --> <div class="about_honor"> <div class="container"> <h2> <img src="/templates/img/honor_img1.png" />…

基于jQuery封装一个瀑布流插件

/*封装一个瀑布流插件*/ (function($){ $.fn.WaterFall = function(){ /*这是你初始化 调用这个方法的时候的 那个jquery选着到的dom对象 this*/ /*$this 拿到的瀑布流容器 中有需要需要去做定位的盒子*/ var $this = $(this); /*拿到容器的宽度*/ var parentWidth = $this.width(); /*瀑布流容器当中的item*/ var items = $this.children(); /*…

jQuery瀑布流插件 Masonry

http://www.jq22.com/yanshi362 参考案例 http://image.quanjing.com/lvyou/…

jQuery 动态添加瀑布流

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body, html { margin: 0; padding: 0; } .box { float: left; width: 240px; padding: 10px; box-shadow: 0 0 5px gray; border: solid…

分享一个jQuery动态网格布局插件：Masonry(转)

在线演示 Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果.和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排列,使用Masonry则垂直排列元素,然后将下一个元素放置到网格中的下一个开发区域.这种效果可以最小化处理 不同高度的元素在垂直方向的间隙.如下: 在上图中大家可以看到,在网格布局中使用float来处理不同高度的元素会使得垂直方向的元素间间隔比较大,而使用Masonry处理后,间隔变小. Javas…

jquery.masonry瀑布流插件的4个使用步骤

1.分别加载jquery插件与jquery.masonry插件两个文件 下载jquery插件:http://jquery.com也可以引用google的cdn外部jquery核心库JS文件下载jquery.masonry插件:http://masonry.desandro.com/加载代码: 1 <script src="js/jquery-1.8.1.min.js"></script> 2 <script src="js/jquery.maso…

瀑布流插件|jquery.masonry|使用demo

Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说: 瀑布流插件的一个基本使用,附上基本功能的demo <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery.masonry的跑通demo</title> <script type=…

jQuery插件之-瀑布流插件

jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽度发生变化的时候,它还能自适应页面宽度,非常有诚意. 查看更多瀑布流插件:http://www.csswang.com/resource/2261.html 官网地址:http://www.wookmark.com/jquery-plugin 演示地址:http://www.wookmark.com…

8款实用的Jquery瀑布流插件

1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机浏览,效果非常棒,遗憾的是不支持IE9以下版本,所以网友们在演示的时候请使用谷歌.火狐等浏览器... 分享JquerySchool网站里面的8款Jquery瀑布流插件 2.网友sole分享23行Jquery代码实现定位瀑布流布局特效 首先非常感谢网友sole的无私分享,此Jquery特效是我从互联网…

利用jQuery来扩展一个瀑布流插件

  简单了解jQuery.fn.extend() jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法). (截图来自jQuery文档) 为了更清晰的理解我将需求写成了注释 扩展代码如下 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ (function($){ $.fn.WaterFall = function () { /* * 瀑布流插件 * 容器的宽度固定 * 子容器的宽度也固定 * 显示…

自定义基于jquery竖向瀑布流插件

公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造轮子写一个,并封装成插件github 于是就想分享一下,主要是为了更好的学习与记忆. 如果大家进来了,希望能给我github点个免费star,你轻轻的来,不要悄悄的走嘛.感谢大佬- - 下面介绍一下(也可以去github看) jquery-waterfall 一款简单jq插件,配载es6语法的竖向瀑布流 插件特点: 数据灵活,可以后台请求数据载入页面也可以直接在html中加入元素,一般放第一页 同个页面可以放置…

一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name…

Wookmark-jQuery-master 瀑布流插件

Wookmark-jQuery-master 瀑布流插件使用介绍,含个人测试DEMO 要求 必备知识 本文要求基本了解 Html/CSS,  JavaScript/JQuery. 开发环境 Dreamweaver CS6 / Chrome浏览器 演示地址 演示地址资料下载   测试预览截图(抬抬你的鼠标就可以看到演示地址哦): 程序核心代码看这里: $(function(){ function show(){ var colors=["#BA4A3A","#5BB5D6&qu…

Wookmark-jQuery-master 瀑布流插件使用介绍，含个人测试DEMO

要求 必备知识 本文要求基本了解 Html/CSS,  JavaScript/JQuery. 开发环境 Dreamweaver CS6 / Chrome浏览器 演示地址 演示地址 资料下载   测试预览截图(抬抬你的鼠标就可以看到演示地址哦): 程序核心代码看这里: $(function(){ function show(){ var colors=["#BA4A3A","#5BB5D6","#8EA83B","#EE5C92"…

jQuery无限载入瀑布流 【转载】

转载至 http://wuyuans.com/2013/08/jquery-masonry-infinite-scroll/ jQuery无限载入瀑布流 好久没更新日志了,一来我比较懒,二来最近也比较忙,惭愧啊.这次我要写的是关于瀑布流网页布局的方法,在网页布局中瀑布流算比较新颖的方式,最近我也试了一下,把本站的电影资源独立出来做了一个子站.因为电影都是以海报形式展示的,图片会比较多,瀑布流应该会比较合适,最后的完成品在这里:Wuyuan's Movie.使用jQuery实现,用到三个插件:Ma…

jQuery 实现的瀑布流

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>最少代码的瀑布流实现</title> <style>html{_background:url(about:blank);} body{ background-color:#fff; color:#333; overflow-x: hidden;} body,h1,h2,h3,h4,h…

响应式瀑布流插件Grid-A-Licious

Grid-A-Licious是一款遵守MIT协议的响应式瀑布流插件.该插件总代码行不超过400行,实现很巧妙,使用时也很流畅.实现原理也很简单,根据屏幕宽度和参数中设置的列宽度以及每项之间的间隔宽度,计算出当前屏幕宽度下应该生成几个等宽列:列生成好之后,再把每项放到等宽列中:当屏幕尺寸改变时,重新计算列表,然后再重新填充项. 使用该插件也很方便.使用实例: <html> <head> <meta charset="utf-8" /> <titl…

jQuery淡入淡出瀑布流效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

Jquery实现图片瀑布流思路-简单版

目录 Jquery实现图片瀑布流思路-简单版 1.预备 2.开始 1.声明 2.主体 3.窗体大小改变事件 Jquery实现图片瀑布流思路-简单版 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特点:列数自适应,图片宽度固定 已知BUG: 像本案例中的刚好5张图片循环显示且只有5列的情况下会有问题,解决办法就是给予样式的时候不按顺序,而是先将图片放在top值最低的列 1.预备 1.基础html <div id="main"> <div class="im…

android实现超酷的腾讯视频首页和垂直水平网格瀑布流一揽子效果

代码地址如下:http://www.demodashi.com/demo/13381.html 先来一波demo截图 实现ListView.GridView.瀑布流 1.导入RecyclerView的库 compile 'com.android.support:recyclerview-v7:25.0.0' 2.xml布局里面使用 ` <android.support.v7.widget.RecyclerView android:id="@+id/recyclerview" an…

瀑布流插件（jquery.masonry.js）

什么是瀑布流?去看看Pinterest(这才是鼻祖),Mark之,蘑菇街,点点网,还有腾讯的微博广场吧.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部. Masonry是一款很好用的jquery瀑布流布局插件,它可以去掉不同高度div之间的空白,让你的网页布局虽然是不规则的,但看上去很整齐. 下载地址:http://masonry.desandro.com/jquery.masonry.js DEMO地址:http://masonry.desandro.com/…

jQuery瀑布流插件——jQuery.Waterfall

插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计算出列数,再维护一个数组,存储每列的高度,往最小高度的列添加块即可.滚动时,当最小高度出现在可视窗口时就启动ajax从服务器拉取更多的数据. 注意的地方: 如果瀑布流的块中包含图片,则需要事先知道图片的高度(其实就是为了要计算出整个块的高度,以便精确定位),图片的高度可以从服务器返回,本插件是整合p…

前端之masonry（图片瀑布流插件）

加载代码: 1 2 <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <script src="http://jq22.qiniudn.com/masonry-docs.min.js"></script> 解释:很简单,就是把下载之后的脚本文件嵌入到你想使用瀑布流形式的页面中,注意文件的名称与路径,根据你自己的实际情况修改.…

基于jQuery的简易瀑布流实现

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>简易瀑布流(基于多栏列表流体布局实现)</title> <style type="text/css"> .WSCWaterfall{ width: 960px; margin: 0 auto; } .WSCWaterfallCell{ margin-bottom:…

移动端三合一瀑布流插件（原生JS）

没有前言,先上DEMO(手机上看效果更佳)和 原码. 瀑布流形式的图片布局方式在手机等移动端设备上运用广泛,比较常见的是下面前两种: 一.等宽等高 这种形式实现起来非常容易,这里就不再多说. 二.等宽不等高 这种形式算是比较正统的瀑布流布局形式,关于如何实现的请参考之前的一篇博文——jQuery瀑布流详解. 三.等高不等宽 在之前的工作中接触到了这种形式的瀑布流,它的主要特点是:同一行的两张图片高度相等,宽度不等,且宽高比与原图近乎一致(没有拉伸变形).但是不同行的图片高度不一定相等,下面就介绍…

jquery练习之瀑布流

最近有空简单学习了下瀑布流,写完后想和大家一起分享下,但我知道我的代码有很多缺陷不足,希望多多包涵.(纯属兴趣非专业学习人士) 众所周知,瀑布流大概分为2种,一种是浮动式的瀑布流,一种是定位式的瀑布流,后者要稍微难于前者,但思维上大同小异.话不多说先上效果图. 1.首先浮动式的瀑布流,这个较简单,需要注意的是对追加图片列的UL的高度的比较,下面为代码 <!doctype html> <html lang="en"> <head> <meta c…

原生 JS 实现一个瀑布流插件

更好的阅读体验,点击 原文地址 瀑布流布局中的图片有一个核心特点 -- 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探索之旅. 基础功能实现 首先我们定义好一个有 20 张图片的容器, <body> <style> #waterfall { position: relative; } .waterfall-box { float: left; width: 200px; } </style>…

jquery实现简单瀑布流

瀑布流这个概念一直不是很理解,看到别人可以实现,自己弄了很久还是不能实现就很纠结.瀑布流这根刺就一直扎在我心里,一次偶然的机会看到别人实现了瀑布流,我想我是不是也应该再继续把这个未完成的任务画一个圆满符号?所以坚持加上强迫自己好好思考,这里引用了别人瀑布流的图片(ps:没有去看实现方法,那些js代码看着晕乎乎的,没jquery简单,@_@). 在这里我采用了我认为简单的方法实现它,可能还有很多问题,希望大家能积极指正,谢谢~ O(∩_∩)O. 一.css代码 .box-inner { posit…

基于jQuery 的图片瀑布流实现

解题思路: 第1步  分析问题:我这边的处理方式是以列为单位.每次滚动条滚到底部,把需要加的新的内容放在高度最小的列.如下图所示 加载后的显示 如果在继续往下滚动.新图片就会在1下边显示,如此类推. 第2步  布局 :页面整体有一个外层,包含1,2,3(图片列) ,html 代码结构 <div class="pictureflow"> <div class="imglist"></div> <div class="…