jquery版瀑布流-阿里云开发者社区

开发者社区> 杰克.陈> 正文

jquery版瀑布流

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

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

  一、演示效果

 

  二、html代码

        <div class="header">header</div>
        <div class="box clearfix">
            <div class="waterFall">
                <ul>
                    <li>
                        <a href="#"><img src="images/image_1.png"/></a>
                        <div><strong>图片1</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_2.png"/></a>
                        <div><strong>图片2</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_3.png"/></a>
                        <div><strong>图片3</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_4.png"/></a>
                        <div><strong>图片4</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_5.png"/></a>
                        <div><strong>图片5</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_6.png"/></a>
                        <div><strong>图片6</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_7.png"/></a>
                        <div><strong>图片7</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_8.png"/></a>
                        <div><strong>图片8</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_9.png"/></a>
                        <div><strong>图片9</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_10.png"/></a>
                        <div><strong>图片10</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_11.png"/></a>
                        <div><strong>图片11</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_12.png"/></a>
                        <div><strong>图片12</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_13.png"/></a>
                        <div><strong>图片13</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_14.png"/></a>
                        <div><strong>图片14</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_15.png"/></a>
                        <div><strong>图片15</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_16.png"/></a>
                        <div><strong>图片16</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_17.png"/></a>
                        <div><strong>图片17</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_18.png"/></a>
                        <div><strong>图片18</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_19.png"/></a>
                        <div><strong>图片19</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_20.png"/></a>
                        <div><strong>图片20</strong></div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer"></div>

   三、css代码

            .header {width: 1000px; height: 200px; background: url("images/header_bg.jpg") no-repeat; margin: auto; border: 1px solid #DDDDDD; box-shadow: 0 0 8px rgba(0,0,0,0.5)}
            .box {width: 1000px; margin: 10px auto; padding: 20px;}
            .waterFall {position: relative; height: auto;}
            .waterFall ul li {position: absolute; width: 200px; padding: 10px; border: 1px solid #CCCCCC; text-align: center; box-shadow: 0 0 5px rgba(0,0,0,0.5); background: #ffffff;}
            .waterFall ul li div {font-size: 16px;}
            .footer {width: 1000px; height: 200px; background: url("images/footer_bg.jpg") no-repeat top right; margin: auto; border: 1px solid #DDDDDD; box-shadow: 0 0 8px rgba(0,0,0,0.5)}

   四、js代码

            /* 等图片加载完成 */
            $(window).load(function(){
                var $waterFall = $(".waterFall"),
                        li = '<li>'+
                                '<a href="#"><img src=""/></a>'+
                                '<div><strong></strong></div>'+
                                '</li>',/* 要添加的li */
                        liWidth = $waterFall.find("li").outerWidth(true), /* li宽度*/
                        liHeight = [], /* li高度,随机的,由图片高度决定 */
                        liLeft = 0, /* li距离左边位置 */
                        liTop = [], /* li距离顶部位置 */
                        leftDistance, /* li间距 */
                        rowCount = 4, /* 一行显示的图片个数 */
                        liAllCount = $waterFall.find("li").length, /* li总个数,也就是图片总个数 */
                        scrollTop, /* 滚动条距离顶部的距离 */
                        boxWidth = $(".box").width(), /* 盒子宽度 */
                        wHeight, /* 窗口的高度 */
                        page = 0; /* json数组中显示的页数 */

                var event = {
                    init: function(){
                        /* 初始化li,给每个li定位 */
                        $waterFall.find("li").each(function(){
                            var _index = $(this).index();
                            liTop[_index] = 0; /* 默认第一行图片距离顶部距离为0 */
                            event.getLeftAndTop(_index);
                        })
                    },
                    /* 设置li标签left和top值,li定位 */
                    getLeftAndTop: function(index){
                        var _row = index % rowCount; /* 第几列 */
                        leftDistance = (boxWidth - liWidth*rowCount)/(rowCount-1); /* li间距 */
                        liLeft = _row*(liWidth + leftDistance); /* 第index个图片距离左边距离 */
                        liHeight[index] = $waterFall.find("li").eq(index).outerHeight(true); /* 表示第index个图片的高度 */
                        if(index < rowCount){ /* 第一行,距离顶部距离都为0 */
                            $waterFall.find("li").eq(index).css({left: liLeft+"px",top: 0});
                        }else if(index >= rowCount){
                            liTop[_row] += liHeight[index - rowCount] + 10; /* 行数大于2,高度自身以上距离+间距 */
                            $waterFall.find("li").eq(index).css({left: liLeft+"px",top: liTop[_row]});
                        }
                        event.setMaxHeight();
                    },
                    /* 设计盒子高度,为了放置footer */
                    setMaxHeight: function(){
                        var newLiTop = [],maxHeight;
                        for(var i = 0; i < liTop.length; i++){
                            newLiTop[i] = liTop[i] + liHeight[i]; /* 得出四列的高度数组 */
                        }
                        maxHeight = Math.max.apply(Math,newLiTop); /* 选出高度最大值 */
                        $waterFall.height(maxHeight); /* 赋值 */
                    },
                    scrollFun: function(){
                        scrollTop = $(document).scrollTop();
                        wHeight = $(window).height();
                        if (($(window).height() + $(window).scrollTop()) >= $(document).height() - 10) { /* 当窗口高度+滚动条高度大于文档高度-10时触发ajax */
                            $.ajax({
                                url: "js/imagesUrl.json",
                                dataType: "json",
                                success: function(result){
                                    if(result[page] != undefined){
                                        var i, max = result[page].page.length; /* max为第page页的图片总个数 */
                                        for(i = 0; i< max; i++){
                                            $waterFall.find("ul").append(li);
                                            liAllCount = $waterFall.find("li").length - 1; /* 得出最末尾的index数 */
                                            $waterFall.find("li").eq(liAllCount).find("img").attr("src",result[page].page[i].url); /* 给图片url赋值 */
                                            $waterFall.find("li").eq(liAllCount).find("strong").text("图片"+i);
                                            event.getLeftAndTop(liAllCount); /* 调用图片定位 */
                                        }
                                        page++; /* 页数增加 */
                                    }
                                }

                            })
                            /* end ajax */
                        }
                    }
                }

                /*---------------------------调用事件-------------------------*/

                /* 初始化 */
                event.init();

                /* 触发滚动条 */
                $(window).scroll(function(){
                    event.scrollFun();
                })

            })

   分析:

  制作瀑布流之前,我就在想想它是以什么形式出现的?不就是看起来像瀑布一样流线型出现的嘛(好抽象……)。图片高度宽度呢?宽度为固定值,li高度是由图片高度决定的。什么时候让图片流动?就是当滚动条触发某个临界值时,开始加载一些新的图片进来。总之就是由很多宽度固定高度不固定的图片组成,在一定情况下触发事件加载新的图片在盒子中。

  init是初始化图片,给每个图片按照某种规律定位。

  getLeftAndTop是给图片定位,这里是根据图片宽度和高度定位的。首先想一下,li的宽度固定而高度是不固定的,liLeft设置只需知道是第几列和它们之间的间距即可,因为第n列所有图片距离左边的距离总是保持一致。第0列距离左边为0,第一列为第0列的宽度+一个li间距,第二列为第一列+第二列宽度+两个li间距(列数*(li宽度+间距)),这样就能得出结果:liLeft = _row*(liWidth + leftDistance)

  那现在有个问题,高度不固定那要怎么定义呢?这个好办,根据图片高度来就ok了(说起来简单,当时这个问题纠结了很久……)。我采取数组的方式,有多少列就有多少个数组(什么意思?),我们定义图片top值是不是和它上面的图片有关系?等于它上面图片的高度值相加再加上之间的间距,比如:我现在要求第五张图片的top值,就是第一张图片的高度+它们之间的间距;第九张图片就是第一张+第五张图片高度+两张图片间距,以此类推,liTop += liHeight[index] + 10,但是有个问题图片高度不一样,你这样做肯定不行,所有图片高度都相加了,我只需要我头顶以上的高度!那改成liTop[_row] += liHeight[index] + 10,也不行啊,这样第一行也下面去了。那我对第一行单独处理,top值设为0,其他行:liTop[_row] += liHeight[index - rowCount] + 10现在liTop就可以了。

  那现在考虑setMaxHeight,其实前面也提到过,有四列,取里面每列图片加起来最大值的就可以了,即:maxHeight = Math.max.apply(Math,newLiTop)

  最后就是加载图片的问题,在json文件中定义图片地址就可以了,我这边是以数组的方式实现:

  这里数组长度为2,可以以 result[p].page[i].url获取里面的url值,result[p]表示加载了p次,result[p].page[i]表示加载了p次的第i个url。json数组中引用page属性,可能容易混淆,大家可以自己定义,它就是表示图片的个数。

  希望这些能给大家一丁点帮助,如果有哪里讲得不好或者不对的对方欢迎指正,谢谢~ 

下载代码

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4477 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7748 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
9423 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
10767 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
16804 0
jQuery 瀑布流插件: Wookmark
原文链接: jQuery Wookmark 在线示例: jQuery Wookmark Demo Wookmark官网: http://www.wookmark.com/jquery-plugin翻译人员: 铁锚 原文日期: 2013年03月05日 翻译日期: 2014年02月22日 当你第一次打开 图片分享网站Pinterest 时,你可能会由衷地赞叹: "哇,每列图的宽度都是相同的,而所有的图片都被裁剪显示为正确的比例."  普通用户可能觉得没什么,但作为一名开发人员,我可以领会到他们对设计、创新和实现的努力,包括服务器端和客户端。
979 0
+关注
杰克.陈
一个安静的程序猿~
9798
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载