javascript实例学习之五—

瀑布流布局的特征：

1，各列的高度参差不齐

2，页面向下滚动时，自动请求和加载新数据

目前，瀑布流布局的主流实现方式有两种：

1，基于浮动，每一列是一个ul，这些ul都向左浮动，这种方法的好处是布局容易，加载较为复杂；

2，基于绝对定位，只有一个ul，所有item都加入该ul中，ul相对定位，item绝对定位，所有图片的宽度已知，所有图片的高度信息使用一个数组记录所有图片的高度（即offsetHeight信息）。

一、基于浮动的瀑布流布局

基于浮动瀑布流布局的html页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>瀑布流布局</title>

</head>

<style>

    *{margin:;padding:;}

    ul>li{list-style: none}

    #div1{width:750px;margin:20px auto;overflow: hidden;}

    ul{width:237px;margin:5px;float:left;}

</style>

<body>

    <div id="div1">

        <ul>

            <li>

                <img src="./images/feed/1.jpg" alt="">

                <p></p>

            </li>

            <li>

                <img src="./images/feed/2.jpg" alt="">

                <p></p>

            </li>

            <li>

                <img src="./images/feed/2.jpg" alt="">

                <p></p>

            </li>

        </ul>

        <ul>

            <li>

                <img src="./images/feed/2.jpg" alt="">

                <p></p>

            </li>

            <li>

                <img src="./images/feed/3.jpg" alt="">

                <p></p>

            </li>

            <li>

                <img src="./images/feed/3.jpg" alt="">

                <p></p>

            </li>

        </ul>

        <ul>

            <li>

                <img src="./images/feed/3.jpg" alt="">

                <p></p>

            </li>

            <li>

                <img src="./images/feed/1.jpg" alt="">

                <p></p>

            </li>

            <li>

                <img src="./images/feed/1.jpg" alt="">

                <p></p>

            </li>

        </ul>

    </div>

    <script src="./js/jquery-2.1.4.min.js"></script>

    <script src="./js/feed.js"></script>

</body>

</html>

基于浮动的瀑布流布局html代码

基于浮动瀑布流布局的js代码

//获取元素相对于屏幕的距离

function getTop(obj) {

    var top = ;

    while (obj) {

        top += obj.offsetTop;

        obj = obj.offsetParent;

    }

    return top;

}

document.addEventListener('DOMContentLoaded', function() {

    var aUls = document.getElementsByTagName('ul');

    var flag = true;

    //添加数据

    function addNext(uls, jsonObj) {

        if (jsonObj['code']) {

            //说明jsonObj['code']等于0，数据发送完毕，没有更新的数据

            flag = true;

        }

        console.log(flag);

        var realData = jsonObj['list'];

        for (var i = ; i < realData.length; i++) {

            var curData = realData[i];

            for (var j = ; j < curData['src'].length; j++) {

                var oLi = document.createElement('li');

                oLi.innerHTML = '<img src="' + curData['src'][j] + '"><p>' + curData['title'][j] + '</p>';

                uls[i].appendChild(oLi);

            }

        }

    }

    window.addEventListener('scroll', function() {

        //可视区域（视口）的高度

        var viewHeight = document.documentElement.clientHeight;

        //滚动条滚动的高度（隐藏在上方的高度）

        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;

        for (var i = ; i < aUls.length; i++) {

            var aLi = aUls[i].getElementsByTagName('li');

            var lastLi = aLi[aLi.length - ];

            //判断最后一个是否进入可视区

            if (getTop(lastLi) < viewHeight + scrollY && flag) {

                //将flag置为false，否则有几个ul，就会连续触发几次

                flag = false;

                //发送ajax请求

                //理论上应当发送ajax请求，这里省略，直接赋予数值

                // $.ajax({

                // });

                var data = {

                    code: ,

                    list: [{

                        src: ['./images/feed/3.jpg', './images/feed/2.jpg', './images/feed/2.jpg'],

                        title: ['', '', '']

                    }, {

                        src: ['./images/feed/1.jpg', './images/feed/2.jpg', './images/feed/3.jpg'],

                        title: ['', '', '']

                    }, {

                        src: ['./images/feed/2.jpg', './images/feed/1.jpg', './images/feed/1.jpg'],

                        title: ['', '', '']

                    }]

                };

                addNext(aUls, data);

            }

        }

    }, false);

}, false);

基于浮动的瀑布流布局js代码

核心思想

监听window的scroll函数，将最后一个列表项的top值和（滚动隐藏高度+视口高度）相比较，判断加载时机

二、基于决定定位的瀑布流布局

基于浮动瀑布流布局的html页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>基于绝对定位的瀑布流布局</title>

    <style>

    * {

        margin: ;

        padding: ;

    }

    ul>li {

        list-style: none;

    }

    .div1 {

        margin: 20px auto;

        width: 730px;

        position: relative;

    }

    li{

        position:absolute;

    }

    </style>

</head>

<body>

    <div class="div1">

        <ul>

            <li>

                <img src="./images/feed/1.jpg" alt="">

                <p></p>

            </li>

            <li>

                <img src="./images/feed/3.jpg" alt="">

                <p></p>

            </li>

            <li>

                <img src="./images/feed/2.jpg" alt="">

                <p></p>

            </li>

            <li>

                <img src="./images/feed/2.jpg" alt="">

                <p></p>

            </li>

            <li>

                <img src="./images/feed/1.jpg" alt="">

                <p></p>

            </li>

            <li>

                <img src="./images/feed/1.jpg" alt="">

                <p></p>

            </li>

            <li>

                <img src="./images/feed/3.jpg" alt="">

                <p></p>

            </li>

            <li>

                <img src="./images/feed/1.jpg" alt="">

                <p></p>

            </li>

            <li>

                <img src="./images/feed/2.jpg" alt="">

                <p></p>

            </li>

        </ul>

    </div>

    <script src="./js/jquery-2.1.4.min.js"></script>

    <script src="./js/jquery-2.1.4.min.js"></script>

    <script src="./js/feed2.js"></script>

</body>

</html>

基于绝对行为的瀑布流布局

基于浮动瀑布流布局的js代码

//获取元素相对于屏幕的距离

function getTop(obj) {

    var top = ;

    while (obj) {

        top += obj.offsetTop;

        obj = obj.offsetParent;

    }

    return top;

}

var aHeight = {

    L: [],

    C: [],

    R: []

};

function refreshUl(aLis) {

    for (var i = ; i < aLis.length; i++) {

        var tmp = i % ;

        switch (tmp) {

            case :

                aLis[i].style.left = "5px";

                aHeight['L'].push(aLis[i].offsetHeight);

                var step = Math.floor(i / );

                var curHeight = ;

                for (var k = ; k < step; k++) {

                    curHeight += aHeight['L'][k] + ;

                }

                aLis[i].style.top = curHeight + 'px';

                break;

            case :

                aLis[i].style.left = "247px";

                aHeight['C'].push(aLis[i].offsetHeight);

                var step = Math.floor(i / );

                var curHeight = ;

                for (var k = ; k < step; k++) {

                    curHeight += aHeight['C'][k] + ;

                }

                aLis[i].style.top = curHeight + 'px';

                break;

            case :

                aLis[i].style.left = "489px";

                aHeight['R'].push(aLis[i].offsetHeight);

                var step = Math.floor(i / );

                var curHeight = ;

                for (var k = ; k < step; k++) {

                    curHeight += aHeight['R'][k] + ;

                }

                aLis[i].style.top = curHeight + 'px';

                break;

        }

    }

}

$(function() {

    var oUl = document.getElementsByTagName('ul')[];

    var aLis = oUl.getElementsByTagName('li');

    //使用数组记录每个元素的高度

    console.log('li个数:'+aLis.length);

    var flag = true;

    refreshUl(aLis);

    //下滑加载部分的代码

    window.addEventListener('scroll', function() {

        var aLis = oUl.getElementsByTagName('li');

        var lastLi = aLis[aLis.length - ];

        var viewHeight = document.documentElement.clientHeight || document.body.clientHeight;

        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;

        if (getTop(lastLi) < viewHeight + scrollY &&flag) {

            var data = {

                'code': ,

                'liData': {

                    'src': ['./images/feed/1.jpg', './images/feed/1.jpg', './images/feed/1.jpg'],

                    'title': ['', '', '']

                }

            }

            if (data['code'] == ) {

                //说明已经没有更多数据

                flag = false;

            }

            var srcData = data['liData']['src'];

            var titleData = data['liData']['title'];

            for (var i = ; i < srcData.length; i++) {

                var curLi = document.createElement('li');

                curLi.innerHTML = '<img src="' + srcData[i] + '"><p>' + titleData[i] + '</p>';

                oUl.appendChild(curLi);

            }

            aLis = oUl.getElementsByTagName('li');

            console.log('aLis个数2：'+aLis.length);

            refreshUl(aLis);

        }

    }, false);

});

基于绝对定位的瀑布流的js代码

javascript实例学习之五——瀑布流布局的更多相关文章

JavaScript——基本的瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
页面瀑布流布局的实现 javascript+css
先看所谓的瀑布流布局在不使用瀑布流布局的情况下,当页面要显示不同高度的图片时,会如下面显示下面的元素总是和最靠近它的元素对齐. 为了使元素能够在我们想要的位置上显示,我们使用绝对定位. 说一下大体 ...
CSS3学习总结——实现瀑布流布局与无限加载图片相册
首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...
jQuery Wookmark Load 瀑布流布局实例演示
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...
JS 瀑布流布局
瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
JavaScript：实现瀑布流
一.前言: 瀑布流现在是一个非常常用的布局方式了,尤其在购物平台上,例如蘑菇街,淘宝等等. 二.流程: 1.在html文件中写出布局的元素内容: 2.在css文件中整体对每一个必要的元素进行样式和浮动 ...
jQuery Wookmark 瀑布流布局
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...
纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
Jquery瀑布流布局
瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,为了便于大家理解我使用了jQuery(当然用源生js代码执行的效率会高一些, ...

随机推荐

tomcat从下载到使用
话说,某天正在和周公聊天下大事.被急促的电话铃声召唤回来,所谓江湖救急,于是远程一看.竟然是需要使用tomcat(汤姆家的猫),于是... 下面关于下载和配置tomcat的过程. ①.使用tomcat ...
FastDFS安装、配置、部署
FastDFS是一个开源的,高性能的的分布式文件系统,他主要的功能包括:文件存储,同步和访问,设计基于高可用和负载均衡,FastDFS非常适用于基于文件服务的站点,例如图片分享和视频分享网站. Fas ...
ThinkPHP中的三大自动简介
ThinkPHP中的三大自动简介文章TAG:thinkphp 自动简介时间:2014-08-23来源:商业源码网作者:源码库文章热度: 186 ℃ 过期已备案域名,注册就能用!终身VIP会员, ...
解决Ecshop因为动态ip问题登录后台自动退出
解决Ecshop因为动态ip问题登录后台自动退出 PHP 铁匠 2年前 (2013-07-21) 1130℃ 0评论修改lib_base.php文件real_ip()函数,添加以下代码即可解 ...
var wi = 0; wi < arr.length; wi++
思维 <?php$w = 123;$wb = $w;$w = 456;echo $wb;?><script type="text/javascript"> ...
Andrew Ng机器学习公开课笔记 -- Mixtures of Gaussians and the EM algorithm
网易公开课,第12,13课 notes,7a, 7b,8 从这章开始,介绍无监督的算法对于无监督,当然首先想到k means, 最典型也最简单,有需要直接看7a的讲义 Mixtures of G ...
Python - 素数筛
def shai(n): prim = list() check = list([1] * (n + 1)) for i in range(2, n + 1): if(check[i] == 1): ...
第四章跨平台图像显示库——SDL 第一节与SDL第一次亲密接触
http://blog.csdn.net/visioncat/article/details/1596576 GCC for Win32 开发环境介绍(5) 第四章跨平台图像显示库——SDL 第一节 ...
三种查看SqlServer中数据物理pge页的方法
1.根据数据记录查看当前记录所在的文件编号.page页.以及在页中的插槽. 示例如下: SELECT top %%physloc%%, sys.fn_physlocFormatter (%%physl ...
linux环境下的伪分布式环境搭建
本文的配置环境是VMware10+centos2.5. 在学习大数据过程中,首先是要搭建环境,通过实验,在这里简短粘贴书写关于自己搭建大数据伪分布式环境的经验. 如果感觉有问题,欢迎咨询评论. 一:伪 ...

javascript实例学习之五——瀑布流布局

javascript实例学习之五——瀑布流布局的更多相关文章

随机推荐

热门专题