一、瀑布流是我们常见的案例，这里主要讲述，用jquery的方式实现瀑布流的功能！

引言：我们经常见到很多网站的瀑布流功能，如淘宝、京东这些商品等等..

实现它我们首先考虑几个问题：1、获取到数据   2、排列的方式  3、如何实现排列

其实，在瀑布流里有个核心的功能就是用到了绝对定位

我们逐步深入分析：

这是html的布局，css布局可以自己设置，只要保证grid盒子有绝对定位，其父元素有相对定位即可！后面有参考代码

下面是script部分

这种方式，可以通过for循环按照顺序获取图片的索引值，然后不断的更改其css样式中的top值和left值！

在我们获取图片的资源时，有的时候图片的高度是不一致的，如果一直按照顺序排列，最后的图片显示，排列不整齐，就会效果不佳！

继续往下看：

我们可以通过另一种方法，来实现图片插入当前列最短的一列，可以解决这个问题！

下面我们来主要看一下jquery的代码：

好了，现在我们已经通过两种方式解决了瀑布流这个问题，但是我们还有个问题没有解决，那就是做瀑布流很大的原因是因为图片的量比较大，我们一个一个写html是不是有点太low了！

继续往下看：

下面介绍一种利用引擎模板来获取json后台的数据的方式，实现这个问题！

1、我们只需要搭建一个html盒子即可！

2、盒子搭建好了，数据要获取啊，就靠它！

3、这是两个js库，在网上可下载到！

4、下面是具体的js部分，需要仔细分析了！

主要包括，调用搜索引擎模板里获取到的内容，绑定函数，转换成jquery对象！

这一部分主要包括：通过ajax向json请求数据

这一部分主要包括：遍历函数，进行寻找最短的列排列格子！

还有这一些，也是第四部分：

最后一步是：滚动的函数，这一部分建议使用console.log在后台验证一下，更容易理解！

虽然最后一种办法麻烦，但是这一次完成，我们就可以使用很多次，并且自动获取很多数据！

下面给大家附上原码，大家好好测试一下，不要忘记更改图片和路径哦！

第一种方法原码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #ccc;
        }
        .waterfall{
            width: 790px;
            /*height: 1000px;*/
            /*border: 1px solid red;*/
            margin: 0 auto;
            position: relative;
        }
        .grid{
            position: absolute;
            width: 230px;
            background-color: white;
            padding: 10px;
            border-radius: 15px;
        }
        .grid img{
            width: 230px;
        }
    </style>
</head>
<body>
    <div class="waterfall">
        <div class="grid">
            <img src="data:images/0.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/1.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/2.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/3.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/4.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/5.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/6.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/7.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/8.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/9.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/10.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/11.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/12.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
    </div>

<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            //得到所有的grid
            $grids = $(".grid");

//
            $grids.each(function(){
                var sum = 0;
                //遍历它上面的人的总高度
                for(var i = $(this).index() - 3 ; i >= 0 ; i-=3){
                    sum += $grids.eq(i).outerHeight() + 20;
                }
                console.log($(this).index());
                $(this).css({
                    "top" : sum,
                    "left" : ($(this).index() % 3) * 270
                })
            });
         }
    </script>
</body>
</html>

第二种方法原码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #ccc;
        }
        .waterfall{
            width: 790px;
            margin: 0 auto;
            position: relative;
        }
        .grid{
            position: absolute;
            width: 230px;
            background-color: white;
            padding: 10px;
            border-radius: 15px;
        }
        .grid img{
            width: 230px;
        }
    </style>
</head>
<body>
    <h3>瀑布流的算法2，看哪个列最矮，插入在哪个列</h3>
    <div class="waterfall">
        <div class="grid">
            <img src="data:images/0.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/1.png" alt="" />
            <p>内容内容内容内容内容内容内内容内容内容内内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/2.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/3.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/4.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/5.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/6.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/7.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/8.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/9.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/10.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/11.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="grid">
            <img src="data:images/12.png" alt="" />
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
    </div>

<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript" src="js/underscore.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            //每个格格不一定往自己序号%3这个列插入，看哪个列目前最矮，插在哪里=
            //得到所有的grid
            $grids = $(".grid");        
             //用一个数组存储当前三个列的总高度
             var colHeight = [0,0,0];  
             // console.log(colHeight);
             // 遍历小格格
             $grids.each(function(){
                 //找一下当前的最短列是谁
                 var minValue = _.min(colHeight); //colHeight里面的最小的值！
                 //看一下最短列出现在index几的位置上
                 var minIndex = _.indexOf(colHeight,minValue);//最短的值的下标
                // console.log(minIndex);
                 $(this).css({
                     "top" : minValue ,
                     "left" : minIndex * 270
                 });
                 colHeight[minIndex] += $(this).outerHeight() + 20;
                 // console.log(colHeight[minIndex]);
             })
         }
    </script>
</body>
</html>

第三种方法原码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #ccc;
        }
        .waterfall{
            width: 790px;
            margin: 0 auto;
            position: relative;
        }
        .grid{
            position: absolute;
            width: 230px;
            background-color: white;
            padding: 10px;
            border-radius: 15px;
        }
        .grid img{
            width: 230px;
        }
        .grid .title{
            font-weight: bold;
            font-size: 18px;
            line-height: 32px;
        }
        .grid .neirong{
            line-height: 150%;
            font-size: 14px;
            margin-bottom: 20px;
        }
        .grid .zuozhe{
            float: right;
            color:orange;
            font-size: 12px;
        }
        .loading{
            margin: 0 auto;
            width: 400px;
            line-height: 30px;
            text-align: center;
            font-size: 14px;
            background-color: gold;
            color:white;
        }
    </style>
</head>
<body>
    <div class="waterfall" id="waterfall">
        
    </div>
    <div class="loading">
        正在加载...
    </div>

<script type="text/template" id="grid_template">
    
        <div class="grid">
            <img src="<%=imgurl%>" alt="" />
            <p class="title"><%=title%></p>
            <p class="neirong"><%=content%></p>
            <p class="zuozhe"><%=author%></p>
        </div>

</script>

<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript" src="js/underscore.js"></script>
    
    <script type="text/javascript">
    // 定义变量和对象
        // 获取引擎模板中发的内容，使用jquery转化成字符串
        var templateString = $("#grid_template").html();
        // 把转化后的字符串绑定在compileFunction函数上!
        var compileFunction = _.template(templateString);//_.template（）返回的是一个函数！
        // console.log(typeof(compileFunction));  //function

//转换成jquery对象,为了后面使用jquery的方法
        var $waterfall = $("#waterfall");
        var $loading = $(".loading");

//三列瀑布流，每列的总高度
        var colHeight = [0,0,0];
        // 这是三列的高度数组，与里面的数值无关，表示index的顺序
        // console.log(colHeight);

// 获取数据
        //信号量
        var page = 1;

getJSONandRender(page);

function getJSONandRender(page){
            // 为了增加用户体验
            $loading.show();

//发出ajax请求
            $.get("json/json" + page + ".txt",function(data){    //输出字符串
                //转为对象
                var dataObj = eval("(" + data + ")");     //解析ajax数据，转换成对象！
                //没有更多数据了
                // dataObj.news.length来自后台json
                if(dataObj.news.length == 0){
                    $loading.show().html("没有更多了");
                    return;   //在这里截止后，lock也会截止
                }

// 遍历函数，动态获取下标值根据绝对定位的位置进行排列！
                _.each(dataObj.news,function(dictionary){   //每遍历一次，执行一次函数！                    
                    //这是系统内置构造函数
                    var image = new Image();   //实例化一个对象分配内存空间
                    // 当对象被实例化后，构造函数会立即执行它所包含的任何代码
                    image.src = dictionary.imgurl;
                    //我们现在给image转为jQuery对象，然后绑定事件
                    $(image).load(function(){
                        // console.log(dictionary.imgurl + "加载完毕");                        
                        var domString = compileFunction(dictionary);
                        // console.log(typeof(domString));
                        var $grid = $(domString);
                        $waterfall.append($grid);
                        //根据瀑布流算法，设置它的left、top
                        // 最小值
                        minValue = _.min(colHeight);
                        // 最小值的位置！
                        minIndex = _.indexOf(colHeight,minValue);
                        $grid.css({
                            "top" : minValue,
                            "left" : minIndex * 270
                        });
                        //改变总列高数组的值
                        colHeight[minIndex] += $grid.outerHeight() + 10;

//让大盒子根据最高的列设置高度
                        $waterfall.css("height",_.max(colHeight));

//隐藏loading文本
                        $loading.hide();
                    });
                });

lock = true;
            });
        }

var lock = true;
        //监听滚动
        $(window).scroll(function(){
            if(!lock) return;
            var rate = $(window).scrollTop() / ($(document).height() - $(window).height());

if(rate >= 0.7){
                page ++;
                getJSONandRender(page);
                lock = false;
            }
        })
    </script>
</body>
</html>

用jquery实现瀑布流案例的更多相关文章

  1. 【前端】用jQuery实现瀑布流效果

    jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...

  2. 网友微笑分享原创Jquery实现瀑布流特效

    首先非常感谢网友微笑的无私分享,此Jquery特效是一款非常流行和实用的瀑布流布局,核心代码只有几十行,是我见过代码量最少的瀑布流布局,非常适合网友们学习哦,希望大家好好看一下这个Jquery特效的原 ...

  3. 用jQuery实现瀑布流效果学习笔记

    jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

  4. 用JavaScript和jQuery实现瀑布流

    ▓▓▓▓▓▓ 大致介绍 在慕课网上学习了用原生js和jQuery实现瀑布流,在这里做个笔记 ▓▓▓▓▓▓ 用JavaScript实现 基本结构: <div id="main" ...

  5. jQuery制作瀑布流(转)

    “瀑布流布局”随着pinterest网的流行而出名,现在国内使用这种风格布局的网站也越来越多,比如说Mark之,蘑菇街,点点网,哇哦等等.我第一次听到这个布局名称是来自于“乔花写的<瀑布流布局浅 ...

  6. jquery.masonry瀑布流插件的4个使用步骤

    1.分别加载jquery插件与jquery.masonry插件两个文件 下载jquery插件:http://jquery.com也可以引用google的cdn外部jquery核心库JS文件下载jque ...

  7. jQuery实现瀑布流

    瀑布流布局多用于加载图片,或者图片配上文字.视觉表现为参差不齐的多栏布局.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部.本文就来利用jQuery实现一个图片瀑布流的效果. 1.布局. 首 ...

  8. Jquery简单瀑布流代码示例

    最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例. 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE ...

  9. jquery版瀑布流

    一个月前用jquery实现了瀑布流效果,看着当时的代码有点难过……今天抽时间稍微修改了一下.额,现在看起来不是那么难受了,就来和大家分享一下.废话不多说,开始正题~ 一.演示效果 二.html代码 & ...

随机推荐

  1. sql server报：名称 不是有效的标识符

    可能出现的几种情况: 1.执行sql提示 名称***不是有效的标识符 --添加括号 sql exec(sql) 注意exec的时候要到括号 exec  (@sql) 2.sql中的单引号嵌套采用两个单 ...

  2. Visual Studio将std::cout输出到Output窗口

    在debug的时候,输出到Output需要使用OutputDebugString函数,但部分库的log是采用std::cout输出的,需要用控制台(黑窗)程序来查看输出.有没有一种使用GUI和Outp ...

  3. 3dmax导出到blend或者vs中

    使用3dmax将模型导成obj格式的时候,可以导出材质或者不导出. 1.如果不导出,则按下图不勾选导出材质和创建材质库选项.这样生成的obj是可以直接再blend或者vs中打开的. 2.如果导出,不仅 ...

  4. SortedList和HashTable

    都是集合类,C#中同属命名空间System.Collections,“用于处理和表现类似keyvalue的键值对,其中key通常可用来快速查找,同时key是区分大小写:value用于存储对应于key的 ...

  5. XStream xml 解析框架使用笔记

    1. xml的标签可以映射为类.类成员变量 2. 有子标签的标签映射为类,没有子标签的便签映射为类成员变量 3. 类名.类成员变量名如与标签名不一致需要通过注解或代码设置别名 // 类名 @XStre ...

  6. 广义线性模型（Generalized Linear Models）

    前面的文章已经介绍了一个回归和一个分类的例子.在逻辑回归模型中我们假设: 在分类问题中我们假设: 他们都是广义线性模型中的一个例子,在理解广义线性模型之前需要先理解指数分布族. 指数分布族(The E ...

  7. XML 特殊字符

    XML转义字符 以下为XML标志符的数字和字符串转义符 "     (" 或 ") '     (' 或 &apos;) &     (& 或 & ...

  8. 一、常见PHP网站安全漏洞

    对于PHP的漏洞,目前常见的漏洞有五种.分别是Session文件漏洞.SQL注入漏洞.脚本命令执行漏洞.全局变量漏洞和文件漏洞.这里分别对这些漏洞进行简要的介绍. 1.session文件漏洞 Sess ...

  9. 微信JS SDK配置授权，实现分享接口

    微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.7月份的时候,因为这个分享的证书获取问题深深的栽了一坑, ...

  10. arm工作模式笔记

    linux用户态程序即应用程序,在user模式 linux内核运行在svc模式 arm七个模式: usr用户模式 fiq快速中断模式 irq普通中断模式 supervior   svc模式 abort ...