您的位置：首页 > 其它

瀑布流布局插件Grid-A-Licous

2016-03-16 16:34 337 查看

1 介绍

该瀑布流布局是横的，而不是CSS的纵向。
官网：http://suprb.com/apps/gridalicious/
从官网中可知
Grid-A-Licous插件的使用只需弄清楚以下知识：（其实就是一个构造方法中的参数说明）

width：每个模块的宽度
gutter：每个模块之间的距离
animate：是否一个个的显示出来
animationOptions：显示模块的详细设置

speed：每个模块显示的时间间隔
duration：模块从开始显示到完全显示出来所需要的时间，渐变。
complete：完全显示后触发的事件。

prepend：在前面添加

append：在后面添加

例子网站：http://www.js-css.cn/a/jscode/flow/2014/0924/1331.html

2 代码

<!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>
<title>Grid-A-Licous插件的使用</title>
<style>
.item
{
background:#bebebe;
border-radius:3px;
padding:10px;
}
</style>
</head>
<body>
<button id="prepend">prepend</button>
<div id="myLayout" class="gridalicious">
<div class="galcolumn">
<div class="item"><img src="images/1.jpg" alt="响应式瀑布流布局插件"/><p>1</p><p>Back in mid 2008, I created a jQuery plugin. I named it Grid-A-Licious and described it as, "Divs are placed in chronological order with a special grid" because I had no clue how to explain it better. I used this script a lot and designed many sites with it during 2008. At first, people were very skept</p></div>
<div class="item"><img src="images/2.jpg" alt="响应式瀑布流布局插件"/><p>2</p></div>
<div class="item"><img src="images/3.jpg" alt="响应式瀑布流布局插件"/><p>3</p></div>
<div class="item"><img src="images/4.jpg" alt="响应式瀑布流布局插件"/><p>4</p></div>
<div class="item"><img src="images/5.jpg" alt="响应式瀑布流布局插件"/><p>5</p></div>
<div class="item"><img src="images/6.jpg" alt="响应式瀑布流布局插件"/><p>6</p></div>
<div class="item"><img src="images/7.jpg" alt="响应式瀑布流布局插件"/><p>7</p></div>
<div class="item"><img src="images/8.jpg" alt="响应式瀑布流布局插件"/><p>8</p></div>
<div class="item"><img src="images/9.jpg" alt="响应式瀑布流布局插件"/><p>9</p></div>
<div class="item"><img src="images/10.jpg" alt="响应式瀑布流布局插件"/><p>10</p></div>
<div class="item"><img src="images/4.jpg" alt="响应式瀑布流布局插件"/><p>11</p></div>
<div class="item"><img src="images/5.jpg" alt="响应式瀑布流布局插件"/><p>12</p></div>
<div class="item"><img src="images/6.jpg" alt="响应式瀑布流布局插件"/><p>13</p></div>
<div class="item"><img src="images/7.jpg" alt="响应式瀑布流布局插件"/><p>14</p></div>
<div class="item"><img src="images/8.jpg" alt="响应式瀑布流布局插件"/><p>15</p></div>
</div>
</div>

<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/jquery.grid-a-licious.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#myLayout").gridalicious({
width: 300, //每个模块的宽度
gutter: 2, //每个模块之间的距离
animate: true, //true时，加载时一个个的显示出来，false-同时显示出来
animationOptions: {//当animate为true时可设置具体详情
speed:200,//设置每个显示的模块显示的间隔时间
duration:300,//模块重开始显示到完全显示出来的时间，渐变。
complete:function(data){//全部显示后执行的触发的事件
//alert("1"+data);
}
},
});

//'prepend'，
makeboxesPrepend = function(){
//模拟滚动条滚动时随机添加内容
var boxes = new Array;
var randTxt = ['prepend_随机1','prepend_随机2'];
var amount = Math.floor(Math.random()*10);//随机数n，在添加n-1个模块
//alert("amount="+amount);
//var amount = 1;
for(i=1;i<amount;i++){
num = Math.floor(Math.random()*randTxt.length);
div = $('<div></div>').addClass('item');
content = "<img src='images/"+i+".jpg'/><p>"+randTxt[num]+"</p>";
div.append(content);
boxes.push(div);
}
return boxes;
}

//按钮事件
$('#prepend').click(function(){
//在瀑布前添加-不影响之前的
$('#myLayout').gridalicious('prepend',makeboxesPrepend());
//在瀑布后添加-不影响之前的
//$('#myLayout').gridalicious('append',makeboxesPrepend());
});
</script>

</body>
</html>

3 效果图

图1



图2 单击prepend后，不影响原理的布局
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航