基于jQuery的简易瀑布流实现
<!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封装一个瀑布流插件
/*封装一个瀑布流插件*/ (function($){ $.fn.WaterFall = function(){ /*这是你初始化 调用这个方法的时候的 那个jquery选着到的dom对象 this* ...
- 基于jQuery 的图片瀑布流实现
解题思路: 第1步 分析问题:我这边的处理方式是以列为单位.每次滚动条滚到底部,把需要加的新的内容放在高度最小的列.如下图所示 加载后的显示 如果在继续往下滚动.新图片就会在1下边显示,如此类推. ...
- Jquery实现图片瀑布流思路-简单版
目录 Jquery实现图片瀑布流思路-简单版 1.预备 2.开始 1.声明 2.主体 3.窗体大小改变事件 Jquery实现图片瀑布流思路-简单版 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特 ...
- jQuery动态网格瀑布流插件Masonry
Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...
- jquery插件实现瀑布流
jquery插件实现瀑布流<!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...
- jQuery淡入淡出瀑布流效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery无限载入瀑布流 【转载】
转载至 http://wuyuans.com/2013/08/jquery-masonry-infinite-scroll/ jQuery无限载入瀑布流 好久没更新日志了,一来我比较懒,二来最近也比较 ...
- jQuery插件之-瀑布流插件
jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...
- jquery练习之瀑布流
最近有空简单学习了下瀑布流,写完后想和大家一起分享下,但我知道我的代码有很多缺陷不足,希望多多包涵.(纯属兴趣非专业学习人士) 众所周知,瀑布流大概分为2种,一种是浮动式的瀑布流,一种是定位式的瀑布流 ...
随机推荐
- win10启动文件夹:
win10启动文件夹: C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp
- Wall Street English
1月23号,报名Wall Street English!
- Android studio中设置颜色的状态选择器
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item andro ...
- [HTML]POST方法和GET方法
GET方法: function btn_get_click(){ var httpRequest = new XMLHttpRequest(); httpRequest.onreadystatecha ...
- ACM题目————又见拦截导弹
描述 大家对拦截导弹那个题目应该比较熟悉了,我再叙述一下题意:某国为了防御敌国的导弹袭击,新研制出来一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:它的第一发炮弹能够到达任意的高度,但是以后每一发炮 ...
- ACM题目————网格动物
Lattice animal is a set of connected sites on a lattice. Lattice animals on a square lattice are esp ...
- 关于viewport的研究
昨天项目中用到了适应移动端显示的viewport,一般的使用方式如下: <meta name="viewport" content="width=device-wi ...
- winform——绑定DataGridView
==========================================================================================重点需要掌握==Au ...
- python3数据类型
python基本数据类型 Python3 中有六个标准的数据类型: Number(数字) String(字符串) List(列表) Tuple(元组) Sets(集合) Dictionary(字典) ...
- Uva 11584，划分成回文串
题目链接:https://uva.onlinejudge.org/external/115/11584.pdf 题意: 一个字符串,将它划分一下,使得每个串都是回文串,求最少的回文串个数. 分析: d ...