<!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的简易瀑布流实现的更多相关文章

  1. 基于jQuery封装一个瀑布流插件

    /*封装一个瀑布流插件*/ (function($){ $.fn.WaterFall = function(){ /*这是你初始化 调用这个方法的时候的 那个jquery选着到的dom对象 this* ...

  2. 基于jQuery 的图片瀑布流实现

    解题思路: 第1步  分析问题:我这边的处理方式是以列为单位.每次滚动条滚到底部,把需要加的新的内容放在高度最小的列.如下图所示 加载后的显示 如果在继续往下滚动.新图片就会在1下边显示,如此类推. ...

  3. Jquery实现图片瀑布流思路-简单版

    目录 Jquery实现图片瀑布流思路-简单版 1.预备 2.开始 1.声明 2.主体 3.窗体大小改变事件 Jquery实现图片瀑布流思路-简单版 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特 ...

  4. jQuery动态网格瀑布流插件Masonry

    Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...

  5. jquery插件实现瀑布流

    jquery插件实现瀑布流<!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...

  6. jQuery淡入淡出瀑布流效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery无限载入瀑布流 【转载】

    转载至 http://wuyuans.com/2013/08/jquery-masonry-infinite-scroll/ jQuery无限载入瀑布流 好久没更新日志了,一来我比较懒,二来最近也比较 ...

  8. jQuery插件之-瀑布流插件

    jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...

  9. jquery练习之瀑布流

    最近有空简单学习了下瀑布流,写完后想和大家一起分享下,但我知道我的代码有很多缺陷不足,希望多多包涵.(纯属兴趣非专业学习人士) 众所周知,瀑布流大概分为2种,一种是浮动式的瀑布流,一种是定位式的瀑布流 ...

随机推荐

  1. USB 设备类协议入门【转】

    本文转载自:http://www.cnblogs.com/xidongs/archive/2011/09/26/2191616.html 一.应用场合 USB HID类是比较大的一个类,HID类设备属 ...

  2. Erlang-基础篇

    一.整数运算: 1.Erlang采用不定长的整数来进行整数的算术演算.在Erlang中,整数运算没有误差,因此无需担心运算溢出,也不用为了一个固定字长容纳不下一个大整数而伤脑筋: 二.变量: 1.所有 ...

  3. 获取一个字符串中每一个字母出现的次数使用map集合

    package 获取字符串中单字符出现次数; import java.util.Scanner; import java.util.TreeMap; /* * 需求:获取一个字符串中每一个字母出现的次 ...

  4. jQuery extend() & jQuery.fn.extend(),插件编写

    资料来源:网上资料整理并自行改编测试.复制以下代码并依赖jquery.js,jquery.validate.js即可执行.有误之处,请@我啊,敬请赐教. <!DOCTYPE html PUBLI ...

  5. textarea不能提交html格式的代码

    解决方法:web.config中<system.web>节点添加 <httpRuntime targetFramework="4.5" requestValida ...

  6. UEditor上传功能

    参考文件http://www.itnose.net/detail/6307204.html 1.复制整个ueditor文件夹到项目任意目录中. 2.添加Web窗体,并按以下方式引用配置和源文件,并实例 ...

  7. 【转】Cookie和Session的区别详解

    转载地址:http://www.phperzone.cn/portal.php?aid=541&mod=view 一.cookie机制和session机制的区别 具体来说cookie机制采用的 ...

  8. C++内存分析

    在C++中,内存分成5个区,他们分别是堆.栈.自由存储区.全局/静态存储区和常量存储区. 栈:就是那些由编译器在需要的时候分配,在不需要的时候自动清除的变量的存储区.里面的变量通常是局部变量.函数参数 ...

  9. poj1703 Find them, Catch them

    并查集. 这题错了不少次才过的. 分析见代码. http://poj.org/problem?id=1703 #include <cstdio> #include <cstring& ...

  10. Gift Hunting(分组背包)

    Gift Hunting Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...