<!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. 虚拟机 本地 本机 双启动 运行 vhd local Dual Boot

    在使用虚拟机的过程中, 可能会遇到虚拟机的运行要求过高, 电脑力不从心的情况. 为了让虚拟机使用更多电脑资源, 可以让虚拟机以本地双系统的方式,访问本地计算机资源. 打开磁盘管理,在磁盘上右键,选择 ...

  2. Cacti Install

    一.Cacti简介 Cacti是通过snmpget来获取数据,使用RRDtool绘画图形,而且你完全可以不需要了解RRDtool复杂的参数.它提供了非常强大的数据和用户管理功能,可以指定每一个用户能查 ...

  3. 25、oracle（一）

    1)了解oracle背景,概念和特点 2)掌握oracleSQL对单表各种查询操作 3)掌握oracleSQL中函数的使用 4)掌握数值型number,字符串型varchar2,日期型date,条件判 ...

  4. JavaEE基础（二十四）/多线程

    1.多线程(多线程的引入) 1.什么是线程 线程是程序执行的一条路径, 一个进程中可以包含多条线程 多线程并发执行可以提高程序的效率, 可以同时完成多项工作 2.多线程的应用场景 红蜘蛛同时共享屏幕给 ...

  5. Linux中PHP如何安装curl扩展方法

    如果php已经在系统编译好,后来又需要添加新的扩展. 一种方式就是重新完全编译php,另一种方式就是单独编译扩展库,以extension的形式扩展. 下面以安装curl扩展为例: 1.下载curl安装 ...

  6. fragment相关

    1.鸿洋大神前两年写的,从最基础的开始详解.对常用的方法都做了精炼的总结,分上下两篇 http://blog.csdn.net/lmj623565791/article/details/3797096 ...

  7. StringUtils中 isEmpty 和isBlank的区别

    StringUtils方法的操作对象是java.lang.String类型的对象,是JDK提供的String类型操作方法的补充,并且是null安全的(即如果输入参数String为null则不会抛出Nu ...

  8. [c++][语言语法]函数模板和模板函数 及参数类型的运行时判断

    参考:http://blog.csdn.net/beyondhaven/article/details/4204345 参考:http://blog.csdn.net/joeblackzqq/arti ...

  9. Resolving failed: Temporary failure in name resolution 错误解决方法

    首先,检查自己的服务器是否配置了DNS:   其次,在确认了自己已经配置了DNS后,并且域名解析已经正常的情况下,还有上面的问题,接下来就是重启自己的web服务器.比如,apache,nginx等. ...

  10. js编程-面相对象

    //js面相对象编程 //定义constructor构造方法 function myFn(name,sex){ this.name = name; this.sex = sex; } //用proto ...