html流式布局插件,Jquery瀑布流网格布局插件

3b6a8ea720d3f8348f55ddf3500e7517.png

8d356dd126880af192ae902c3e671bd1.png

插件描述:一款简单且高度可定制的jQuery瀑布流网格布局插件。通过该瀑布流网格插件你可以动态添加和删除各种尺寸的图片,定义图片宽度,设置网格的列数,或使用流式布局方式,甚至还可以通过URL动态添加图片。

使用该瀑布流布局插件之前要先引入jQuery和stackgrid.adem.js文件。

HTML结构

该瀑布流网格布局插件使用的是嵌套

的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 = $("

I'm a new grid 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:该函数用于缩放保存网格的容器。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/338105.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

编程语言:C语言与Java的细致对比,你知道选谁了吗?

点击上方蓝字关注我,了解更多咨询1.Java与C语言各自的优势C语言是面向过程的语言,执行效率高;Java是面向对象的语言,执行效率比C语言低。C语言最关键的是比Java多了指针,这也说明了Java的健壮性,还有Java的多线程机制使…

ajax实现表单验证 html,Ajax+ajax做的表单验证

//Ajx实现异步示例,blur实现失去焦点触发jQuery(#formname).blur(check);function check(){alert("开始执行Ajax");//判断用户是否存在var formname jQuery("#formname").val();if(formname""){jQuery(#msgName).html(表单名称不能为…

java ee maven_针对新手的Java EE7和Maven项目–第8部分

java ee maven第一部分 , 第2部分 , 第3部分 , 第4部分 , 第5部分 , 第6部分 , 第7部分 第8部分 自上一篇文章以来,这一系列教程已经有很长时间了。 是时候恢复并在我们的简单项目中添加…

Python、Perl 垫底,C语言才是最环保的编程语言

点击上方蓝字关注我,了解更多咨询提到编程语言,人们第一时间想到的无非是:哪个编程语言简单易学,亦或是最挣钱等。但是编程语言功耗问题却被很多人忽视。那么作为程序员的我们如何选择编程语言,使其以低能耗高功效地工…

khoury计算机科学学院,东北大学Open House中国站

东北大学Open House中国站 -10月26日北京 & 10月27日上海东北大学向金吉列留学的学生发来诚挚邀请,欢迎您的学生前来参加东北大学于 10 月 26 日(周六)在北京 和 10 月 27 日(周日)在上海 举办的东北大学 Open House 教育展。在这两个 Open House 教育展上&…

知识分享:值得学习的C语言经典开源项目

点击上方蓝字关注我,了解节气咨询听上去有些荒谬,C语言的产生竟然源于一个失败的项目。1969年,通用电气、麻省理工学院和贝尔实验室联合创立了一个庞大的项目——Multics工程。该项目的目的是创建一个操作系统,但显然遇到了麻烦&a…

oracle idm_批准Oracle IDM中的特定Web服务

oracle idm关于Web服务端点的快速发布,OIM和SOA在与批准有关的场景中使用了Web服务端点- 基本内容,但对于初学者可能有用 。 Oracle IDM与SOA套件集成并利用其提供与批准相关的功能(说实话,SOA非常丰富,并且也被用作W…

C语言编程笔记:关于 for循环 的那些不为人知的秘密

点击上方蓝字关注我,了解更多咨询好吧,也许你认为我在写一篇如何使用for循环的文章,,,,首先,我想说无论是学习C语言还是学习java的同学都能从此文中获益,还有,你确定你会…

weld焊接_玩Weld-Probe –一站式查看CDI的所有方面

weld焊接当我坐在DevConf.CZ的会议室时, Weld 3.0.0.Alpha4已发布 。 大约在Jozef Hartinger( jozefhartinger )旁边或多或少 ,后者在共享休息前几分钟告诉我有关此最新版本的新功能的信息。 有一个特别的功能真正引起了我的注意&…

C语言:一种通用的程序设计语言

点击上方蓝字关注我,了解更多咨询语言是一种通用的程序设计语言。它同UNIX系统之间具有非常密切的关系。C语言是在UNIX系统上开发的,且无论是UNIX系统本身还是其上运行的大部分程序,都是C语言编写的。但是C语言并不受限于任何一种操作系统或机…

可禁用计算机服务,win10哪些服务可以禁用 服务哪些可以禁止启动

win10服务哪些可以禁止启动?方法一:命令方法首先使用 Windows R 组合快捷键打开“运行”窗口,之后键入 services.msc 按下回车键,即可打开“服务”。方法二:快捷方式法在Win10桌面的“此电脑”图标上点击鼠标右键&…

如何用最短的时间学会C语言,并掌握C语言的精髓所在?

点击上方蓝字关注我,了解更多咨询及C语言,我想凡是学过它的朋友都有这样一种感觉,那就是“让我欢喜让我忧。”欢喜的是,C语言功能非常强大、应用广泛,一旦掌握了后,你就可以理直气壮地对他人说“我是电脑高…

apache fop_Apache FOP与Eclipse和OSGi的集成

apache fopApache FOP是由XSL格式化对象( XSL-FO )驱动的开源打印处理器。 例如,将数据对象转换为PDF可能非常有用。 但是,事实证明,将其集成到PDE中并最终以OSGi Service的形式启动和运行有点麻烦。 因此&#xff0c…

2022年最值得学习的 5 种编程语言,你有在学习吗?

点击上方蓝字关注我,了解更多咨询作为一个初学者电脑程序员,很多人都会想知道当下主流的编程语言有哪些,哪些行业和公司都在用它们,因为这些信息可以帮助你了解想要学习的内容,使你更接近最终想用代码完成的事情。今天…

wildfly mysql_MySQL作为Kubernetes服务,可从WildFly Pod访问

wildfly mysqlKubernetes上使用Vagrant的Java EE 7和WildFly(技术提示#71)介绍了如何在使用Kubernetes和Docker托管的WildFly上运行琐碎的Java EE 7应用程序。 Java EE 7应用程序是在世界范围内交付的动手实验室 。 它使用与WildFly捆绑在一起…

想学C语言?这些你一定要知道

点击上方蓝字关注我,了解更多咨询首先,你想运行自己的C语言程序,就必须要有一个IDE(集成式开发工具)。不然想运行程序很难。这里有两个方法可以运行你的C语言程序,一个是在菜鸟网站上云运行C语言程序&#…

mongodb实验报告_Dropwizard,MongoDB和Gradle实验

mongodb实验报告介绍 我使用Dropwizard,MongoDB和Gradle创建了一个小项目。 它实际上是作为一个实验性的Guava缓存开始的,作为将计数器发送到MongoDB(或任何其他DB)的缓冲区。 我也想尝试MondleDB插件的Gradle。 接下来&#xff0…

历城职专学前计算机专业,历城职专学前教育专业2020学年第一学期技能运动会拉开帷幕...

原标题:历城职专学前教育专业2020学年第一学期技能运动会拉开帷幕技能运动会学前教育专业技能运动会1月13日,历城职专学前教育专业2020学年第一学期技能运动会拉开帷幕,技能运动会是历城职专对每一位职专学子专业技能考核的一项重要检测&…

如何正确认识C语言在当今编程领域的地位

点击上方蓝字关注我,了解更多咨询一、什么是语言,什么是C语言,有什么区别与联系?一提到语言这个词,人们自然想到的是像英语、汉语等这样的自然语言,因为它是人和人相互交流信息不可缺少的工具。大家听到我们…

理解好内存管理,C语言就不难学了

点击上方蓝字关注我,了解更多咨询任何程序运行起来都需要分配内存空间存放该进程的资源信息的,C程序也不例外。C程序中的变量、常量、函数、代码等等的信息所存放的区域都有所不同,不同的区域又有不同的特性。C语言学习者、尤其是在学习嵌入式…