基于jQuery的简易瀑布流实现
2014-04-03 14:11
363 查看
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>简易瀑布流（基于多栏列表流体布局实现）</title>
<style type="text/css">
.WSCWaterfall{
width: 960px;
margin: 0 auto;
}
.WSCWaterfallCell{
margin-bottom: 10px;
padding: 5px 8px;
line-height: 18px;
width: 214px;
border: 1px solid #999;
border-radius: 4px;
background-color: #ccc;
overflow: hidden;
}
.WSCWaterfallColumn{
display: inline-block;
vertical-align: top;
}
.template_div{
display: none;
}
</style>
</head>
<body>
<div class="WSCWaterfall">
</div>
<div class="template_div">
<div class="WSCWaterfallColumn"></div>
<div class="WSCWaterfallCell"></div>
</div>
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript">
function WSCWaterFall(arg_obj){
var data_arr = arg_obj["data_arr"] || [];
var columnNum = arg_obj["columnNum"] || 4;
var $WSCWaterfallCell_template = arg_obj["WSCWaterfallCell_template"] || $('.template_div').find(".WSCWaterfallCell");
var $WSCWaterfallColumn_template = arg_obj["WSCWaterfallColumn_template"] || $('.template_div').find(".WSCWaterfallColumn");
var $WSCWaterfall =arg_obj["WSCWaterfall_outer"] || $(".WSCWaterfall");
var waterFallCell = arg_obj["waterFallCell_fn"] ;
var columnArr = [];
var cellArr = [];
// 生成列数组
for(var j=0; j<columnNum; j++){
var $WSCWaterfallColumn = $WSCWaterfallColumn_template.clone(true);
columnArr.push($WSCWaterfallColumn);
}
// 生成瀑布流单元，用户可自定义
waterFallCell(data_arr, $WSCWaterfallCell_template, cellArr);
// 列数组和单元数组筛选配对
for(var k = 0; k < cellArr.length; k++){
var $WSCWaterfallCell = cellArr[k];
var index = (k % columnNum);
try{
columnArr[index].append($WSCWaterfallCell);
}
catch(e){
console.log(e);
console.log(index);
}
}
// 渲染html页面
for(var i=0; i< columnArr.length; i++){
// 可优化的地方，一次append进去，而不是循环append
$WSCWaterfall.append(columnArr[i]);
}
}
// 初始化测试数据
var data_arr = [];
for(var i=0; i<50; i++){
data_arr.push(i);
}
// data_arr是数据源
// columnNum 是列数
// WSCWaterfallCell_template 是 瀑布流单元格的模板jQuery引用
// WSCWaterfallColumn_template 是 瀑布流列的模板jQuery引用
// WSCWaterfall_outer 是 包裹瀑布流的jQuery引用
// waterFallCell_fn 是 渲染瀑布流单元格的方法,其中第三个参数cellArr是指单元格的jQuery引用数组,它根据data_arr和WSCWaterfallCell_template计算出来
WSCWaterFall({
"data_arr":data_arr,
"columnNum":4,
"WSCWaterfallCell_template" : $('.template_div').find(".WSCWaterfallCell"),
"WSCWaterfallColumn_template" :$('.template_div').find(".WSCWaterfallColumn"),
"WSCWaterfall_outer" : $(".WSCWaterfall"),
"waterFallCell_fn" : function(data_arr, $WSCWaterfallCell_template, cellArr){
for (var i = 0; i < data_arr.length; i++) {
var $WSCWaterfallCell = $WSCWaterfallCell_template.clone(true);
$WSCWaterfallCell.append(i);
cellArr.push($WSCWaterfallCell);
}
}
});
</script>
</body>
</html>封装成jQuery插件如下
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>封装成jQuery插件，简易瀑布流（基于多栏列表流体布局实现）</title>
<style type="text/css">
.WSCWaterfall{
width: 960px;
margin: 0 auto;
}
.WSCWaterfallCell{
margin-bottom: 10px;
padding: 5px 8px;
line-height: 18px;
width: 214px;
border: 1px solid #999;
border-radius: 4px;
background-color: #ccc;
overflow: hidden;
}
.WSCWaterfallColumn{
display: inline-block;
vertical-align: top;
}
.template_div{
display: none;
}
</style>
</head>
<body>
<div class="WSCWaterfall">
</div>
<div class="WSCWaterfall">
</div>
<div class="template_div">
<div class="WSCWaterfallColumn"></div>
<div class="WSCWaterfallCell"></div>
</div>
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript">
// data_arr是数据源
// columnNum 是列数
// WSCWaterfallCell_template 是 瀑布流单元格的模板jQuery引用
// WSCWaterfallColumn_template 是 瀑布流列的模板jQuery引用
// WSCWaterfall_outer 是 包裹瀑布流的jQuery引用
// waterFallCell_fn 是 渲染瀑布流单元格的方法,其中第三个参数cellArr是指单元格的jQuery引用数组,它根据data_arr和WSCWaterfallCell_template计算出来
/*
WSCWaterFall({
"data_arr":data_arr,
"columnNum":4,
"WSCWaterfallCell_template" : $('.template_div').find(".WSCWaterfallCell"),
"WSCWaterfallColumn_template" :$('.template_div').find(".WSCWaterfallColumn"),
"WSCWaterfall_outer" : $(".WSCWaterfall"),
"waterFallCell_fn" : function(data_arr, $WSCWaterfallCell_template, cellArr){
for (var i = 0; i < data_arr.length; i++) {
var $WSCWaterfallCell = $WSCWaterfallCell_template.clone(true);
$WSCWaterfallCell.append(i);
cellArr.push($WSCWaterfallCell);
}
}
});
*/
// 初始化测试数据
var data_arr = [];
for(var i=0; i<50; i++){
data_arr.push(i);
}
(function($){
$.extend($.fn, {
"WSCWaterFall": function(options){
var options = $.extend({
"data_arr":[],
"columnNum": 4
}, options);
return this.each(function(index,element){
options["WSCWaterfall_outer"] = $(element);
WSCWaterFall(options);
});
}
});
function WSCWaterFall(arg_obj){
var data_arr = arg_obj["data_arr"] ;
var columnNum = arg_obj["columnNum"];
var $WSCWaterfallCell_template = arg_obj["WSCWaterfallCell_template"] ;
var $WSCWaterfallColumn_template = arg_obj["WSCWaterfallColumn_template"] ;
var $WSCWaterfall =arg_obj["WSCWaterfall_outer"] ;
// var $WSCWaterfall = $(this);
var waterFallCell = arg_obj["waterFallCell_fn"] ;
var columnArr = [];
var cellArr = [];
// 生成列数组
for(var j=0; j<columnNum; j++){
var $WSCWaterfallColumn = $WSCWaterfallColumn_template.clone(true);
columnArr.push($WSCWaterfallColumn);
}
// 生成瀑布流单元，用户可自定义
waterFallCell(data_arr, $WSCWaterfallCell_template, cellArr);
// 列数组和单元数组筛选配对
for(var k = 0; k < cellArr.length; k++){
var $WSCWaterfallCell = cellArr[k];
var index = (k % columnNum);
try{
columnArr[index].append($WSCWaterfallCell);
}
catch(e){
console.log(e);
console.log(index);
}
}
// 渲染html页面
for(var i=0; i< columnArr.length; i++){
// 可优化的地方，一次append进去，而不是循环append
$WSCWaterfall.append(columnArr[i]);
}
}
})(jQuery);
$(".WSCWaterfall").WSCWaterFall({
"data_arr":data_arr,
"columnNum": 3,
"WSCWaterfallCell_template" : $('.template_div').find(".WSCWaterfallCell"),
"WSCWaterfallColumn_template" :$('.template_div').find(".WSCWaterfallColumn"),
"waterFallCell_fn" : function(data_arr, $WSCWaterfallCell_template, cellArr){
for (var i = 0; i < data_arr.length; i++) {
var $WSCWaterfallCell = $WSCWaterfallCell_template.clone(true);
$WSCWaterfallCell.append(i);
cellArr.push($WSCWaterfallCell);
}
}
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 基于jquery实现瀑布流布局
- 基于jQuery 的图片瀑布流实现
- 基于jquery实现瀑布流布局
- jQuery来实现一个简易的瀑布流技术
- 基于JavaScript实现瀑布流布局
- 基于jquery+raphael实现的可拖动树形流程图
- 自编基于jQuery实现分页插件
- 基于jquery实现左右上下移动效果
- 基于asp.net下使用jquery实现ajax的解决方法
- jQuery基于函数重载实现自定义Alert函数样式的方法
- 基于jQuery实现仿微博发布框字数提示
- 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果
- 基于jquery实现等比缩放图片
- 基于jQuery实现文本框只能输入数字(小数、整数)
- 基于jquery和knockout.js 写个瀑布流异步加载分页
- 基于jquery,php实现AJAX长轮询(LongPoll)
- 基于jquery实现人物头像跟随鼠标转动
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
- 基于jquery实现等比缩放图片