基于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种,一种是浮动式的瀑布流,一种是定位式的瀑布流 ...
随机推荐
- 如何通过ps -ef|grep tomcat只获得你需要的查询进程，排除掉grep本身的进程信息
执行命令:ps -ef|grep tomcat|grep /opt/upay3/application/dispatcherTomcat/bin输出的进程信息会显示2个:包括grep本身的进程+你查询 ...
- Android的startActivityForResult()与onActivityResult()与setResult()参数分析，activity带参数的返回
一.使用场景 在一个主界面(主Activity)通过意图跳转至多个不同子Activity上去,当子模块的代码执行完毕后再次返回主页面,将子activity中得到的数据显示在主界面/完成的数据交给主Ac ...
- Http的常见问题
A: HTTP(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议. B: 文件传输协议FTP.电子邮件传输协议SMTP.域名系统服务DNS.HTTP协议等都同是应用层协议. C:HT ...
- jquery,返回到顶部按钮
HTML: <footer> <a href="#" class="top">↑</a> </footer> C ...
- linux中Iptables限制同一IP连接数防CC/DDOS攻击方法
1.限制与80端口连接的IP最大连接数为10,可自定义修改. 代码如下 复制代码 iptables -I INPUT -p tcp --dport 80 -m connlimit --connlim ...
- Oracle触发器使用介绍
触发器,函数,包都是可以再生利用的东西,所以在创建的时候都要用到create or replace这个万能语句,接着就是主角trigger的出现了,主角出现还需要一点点波动,通常大人物都不是随随便便就 ...
- python中split函数的使用
最近学习python,对split函数做了下总结,内容如下:
- 层叠样式表(CSS)
层叠样式表(CSS) CSS(Cascading Style Sheet)中文译为层叠样式表.是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.CSS的引入就是为了使得HTML语言能够 ...
- UVa 489，紫书P79，刽子手游戏
题目链接:https://uva.onlinejudge.org/external/4/489.pdf 这个题很像之前的一个拓扑排序的题目,思路类似咯. 程序模块化: 每次判断一个字母,lose,wi ...
- JMeter基于http请求的web接口性能测试总结
[本文出自天外归云的博客园] 基于http请求的web接口性能测试总结 压测的目的:对于Web接口压测的目的最终是要在对数据库造成压力的情况下观察压测服务器的cpu是否达到预警值.memory是否发生 ...