html流式布局插件,Jquery瀑布流网格布局插件
插件描述:一款简单且高度可定制的jQuery瀑布流网格布局插件。通过该瀑布流网格插件你可以动态添加和删除各种尺寸的图片,定义图片宽度,设置网格的列数,或使用流式布局方式,甚至还可以通过URL动态添加图片。
使用该瀑布流布局插件之前要先引入jQuery和stackgrid.adem.js文件。
HTML结构
该瀑布流网格布局插件使用的是嵌套
初始化插件
在确保所有内容都被加载之后,可以通过下面的方法来初始化该瀑布流网格布局插件。一定要确保所有的内容都被加载,这样可以使stackgrid计算出正确的高度。// Create a stackgrid object.
var stackgrid = new $.stackgrid;
var options = {
column_width: 320
};
// Wrap the initializer inside window on load to
// make sure to wait until all the grid contents are loaded.
var $window = $(window);
$window.on('load', function(){
// Initialize stackgrid!
// The first two arguments are for the container selector and the item selector.
stackgrid.initialize('#grid-container', '.grid-item', options);
});
添加新的网格
该瀑布流网格布局插件允许你动态的添加新的网格。并且这个过程不需要重新绘制所有的网格。// Create new grid-item.
item = $("
");
// Append it to the grid-container.
item.appendTo("#grid-container");
// *** If the new content has image(s), make sure it's loaded first before appending!
// Append to stackgrid!
stackgrid.append(item);
重新排列网格// Restack the grid to apply your config changes.
stackgrid.config.is_fluid = false;
stackgrid.restack();
// Certain changes require you to reset the grid.
// These are changes that affect the dimensions of the grid-item or
// if you remove any of the items.
stackgrid.config.column_width = 400;
stackgrid.reset();
stackgrid.restack();
配置参数
下面是该瀑布流网格布局的可用配置参数。// The values shown here are the default ones.
stackgrid.config = {
// Your column width.
column_width: 320,
// Adjust spacing in-between grid-items.
gutter: 20,
// Set this as true to let stackgrid automatically
// determine the number of columns based on the
// viewport's width.
is_fluid: true,
// Set this as true to sort the grid in an vertically optimal way.
is_optimized: true,
// If is_fluid is false, it will
// use this as the default number of columns.
number_of_columns: 4,
// Timeout delay to call the resize complete function.
resize_delay: 300,
// You can customize when and how each item is moved!
// Make sure to use jQuery stop() function if you decide to
// animate it.
// Where you place the callback determines
// when the next move operation is called.
move: function(element, left, top, callback) {
element.css({
left: left,
top: top
)};
callback();
},
// This function is used to scale the container containing
// the grid-items.
// The callback function starts the move operations.
scale: function(element, width, height, callback) {
element.css({
height: height,
width: width
});
callback();
}
};
column_width:网格的宽度。
gutter:网格之间的间距。
is_fluid:是否设置为流式布局。流式布局会使网格自适应页面视区宽度。
is_optimized:该选项设置为true可以使垂直的网格优化排序。
number_of_columns:如果is_fluid选项设置为flase,则使用该选项的值为默认的网格列数。
resize_delay:改变尺寸后的延迟时间。
move:自定义什么时候以及如何移动网格。
scale:该函数用于缩放保存网格的容器。
html流式布局插件,Jquery瀑布流网格布局插件相关推荐
- ajax瀑布流插件,jQuery瀑布流无限加载插件:jquery.falless.js
慌慌张张,匆匆忙忙,为何生活总是这样? 难道说,我的理想,就是这样度过一生的时光?........... 真的是一年一年飞逝而去,而人的一生,又有几个一年? 第一个四年即将结束,得到了什么?又失去了什 ...
- 写了个jquery瀑布流插件 , 求各位道友猛男指点指点
如题 ,请各位大佬指点一下 ;;(function(){if(typeof jQuery === "function"){(function( factory , $ ){if($ ...
- jquery 瀑布流实例最流行瀑布流图片展示
jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例,通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示.用户可以无限浏览图片或内容无限加载瀑布流 ...
- uview 瀑布流_微信小程序瀑布流最好最简单的解决方案
网上能搜到的小程序瀑布流解决方案,要么代码复杂.逻辑混乱,要么实现不了业务功能,所以把我在项目中的实现方案给大家分享下. 最简单的实现方案,不适用有分页的场景. 这个方案简单的原因是因为仅仅使用了cs ...
- 用 jQuery Masonry 插件创建瀑布流式的页面(转)
瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...
- 流式布局之javascript实现照片瀑布流以及Macy.js插件实现瀑布流
文章目录 瀑布流的定义 一.实现效果 代码 首先是用javascript自己手写代码实现照片瀑布流 使用插件Mary.js照片流插件实现照片瀑布流 总结 瀑布流的定义 瀑布流是什么? 1.琳琅满目:整 ...
- Jquery瀑布流插件wookmark
瀑布流布局在现在的网页设计里面可谓是相当的流行的,从网页到手机应用,都能见到瀑布流的身影.相比较手机应用来说,感觉网页上的瀑布流布局效果实现简单很多,因为我们有现成的jQuery插件可以用,只要稍微的 ...
- 15个非常棒的jQuery无限滚动插件【瀑布流效果】
现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流).如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的 ...
- 不固定图片宽高瀑布流_APP设计学习:瀑布流式的产品UI设计
看到好的APP产品UI设计,真是忍不住想要停留几秒,慢慢来欣赏.今天学堂君收集了近期不错的优质的APP设计作品,看起来极舒服的UI界面,分享给大家.这一期的重点学习:在APP界面设计当中,如何应用瀑布 ...
最新文章
- predicate 列存储索引扫描_在SQL SERVER中导致索引查找变成索引扫描的问题分析
- Python中的常规习题
- CSDN内容颜色、位置以及图片大小改变
- NYOJ 179 LK's problem
- Linux 防火墙的基本认识
- 金山毒霸2012正式公测 首次实现新病毒99秒查杀
- python实现傅里叶变换求幅值和相位_Python 实现图像快速傅里叶变换和离散余弦变换...
- 5G时代需要新的商业模式,国产芯片将不再落后
- 关于scrollTop
- 《信息安全系统设计基础》第六周学习总结
- 设计模式-工厂模式-3种-以手机制造工厂为例
- 显示搜索dota2协调服务器,老司机教你处理搜索dota2游戏协调服务器中【操作流程】...
- MATLAB工具箱概述
- Stata:多元回归中控制其他因素不变的含义
- html5 梵高 星,上海梵高星空艺术馆门票
- AI洞观 | 一文读懂2018安博会四大趋势
- Tensorflow1.7+cuda9.0+cudnn7.0中的各种意(da)外(keng)
- Hibernate主键生成策略总结
- PostgreSQL 14 pageinspect新增gist索引支持
- 少儿编程Scratch学习教程--Scratch3.0界面简介
热门文章
- jackson使用_如何在Jackson中使用PropertyNamingStrategy
- play!框架_在Play上使用twitter4j! 框架和安全社交很容易
- Spring Boot和Angular 2入门食谱
- Neo4j:使用LOAD CSV检测CSV标头中的恶意空间
- 打破冷漠僵局文章_研究僵局–第1部分
- junit 测试 dao_JUnit测试Spring Service和DAO(带有内存数据库)
- jdbc:log4jdbc_使用Log4jdbc记录JDBC操作
- JAX-RS和JSON-P集成
- 将java.util.concurrent.BlockingQueue用作rx.Observable
- Java转换难题者,不适合工作(或面试)