手机版

jQuery砖石瀑布插件详细说明

时间:2021-09-09 来源:互联网 编辑:宝哥软件园 浏览:

砖石是一个非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似于剪贴画的界面效果,与CSS中的float效果不同,float是先水平后垂直排列的,而砖石是用来垂直排列元素,然后将下一个元素放置在网格中的下一个开发区域。这种效果可以最小化不同高度元素之间的垂直间隙。如下所示:

从上图可以看出,在网格布局中使用float处理不同高度的元素,会使元素之间在垂直方向上的间隔变大,但使用砖石处理后,间隔会变小。

使用

首先倒入类库,如下图:

复制的代码如下:脚本src=' http://Ajax . googleapi.com/Ajax/libs/jquery/1 . 6 . 1/jquery . min . js '/script script src=' http 3360/path/to/jquery .砖石结构. min . js '/脚本

然后,按照以下步骤在元素容器上执行砌筑:

复制代码如下: $(function(){ $(' # container '))。砖石工程({//选项项目选择器:’。item ',列宽: 240 });});

Html代码

复制的代码如下: div ID=' container ' div class=' item './div div class=' item './div div class=' item './div./div

钢性铸铁

复制代码如下: item { width : 220 px;margin: 10px向左浮动:}

如果您加载的元素中有图片,您需要确保在加载完所有图片后执行砖石工程,并且您需要调用以下代码:

复制代码如下: var $ container=$(' # container ');$ container . images loaded(function(){ $ container .砖石结构({ items elector : })。项目',列宽: 240

版权声明:jQuery砖石瀑布插件详细说明是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。