文档章节

对JavaScript简单的瀑布流学习实现

溪语_8023
 溪语_8023
发布于 2015/11/22 20:03
字数 1369
阅读 41
收藏 2
在某些网站中,用户需要浏览大量的图片,当我们滑动鼠标下拉时自动刷新显示更多地图片会给用户带来好的体验,因此需要用到JavaScript中的瀑布流显示:
1.当我们将一定数量的图片显示在浏览器下,起初如果不设置任何属性的话,会在一列下参差不齐的排序,于是我来设置一下她的CSS样式:
*{
    margin: 0;
    padding: 0;
}
#container{
    position: relative;
}
.box{
    padding: 3px;
    float: left;
}
.box_img{
    padding: 5px;
    border: 1px solid springgreen;
    box-shadow: 0 0 5px #AAA;
    border-radius: 5px;
}
.box_img img{
    width:150px;
    height: auto;;
} 
让其宽度为固定值,带边框,这样在一行中的显示的数量就是有限的,宽度统一。但是再加入一行图片时,他给我们带来的视觉效果就不尽人意了,由于高度的自适应,下一行的图片只好另选整齐的一行来排列,这就使我们两行图片的中间出现了很大的缝隙,影响了美感。
2.于是我们想到要让第二行的图片紧接着第一行中高度最矮的位置依次叠加排列,当发现这列中的图片高度最矮时,下一张图片就接着他在下面排列,这样,就不会出现这种中间有很大空隙的差别了。
3.首先固定一行中的图片数,紧接着算出这一行中高度最小的图片,确定位置,添加图片。
//得到container下的box元素就知道该页面显示几张图片了
function getElement(parent,content){
    var  countArr=[];
    var allcontent=document.getElementsByTagName("*");
    for(var i=0;i<allcontent.length;i++){
        if(allcontent[i].className==content){
            countArr.push(allcontent[i]);
        }
    }
    return countArr;
}

 function imgLocation(parent,content){
    var cparent=document.getElementById(parent);
 //将得到的值传入到方法中,返回数组
    var ccontent=getElement(parent,content);
    var imgwidth=ccontent[0].offsetWidth;
 //得到一行中显示的最大量图片数,
    var num=Math.floor(document.documentElement.clientWidth/imgwidth);
    cparent.style.cssText="width:"+imgwidth*num+"px;margin:0 auto";
//将高度存入到数组中。
    var boxHeight=[];
    for (var i=0;i<ccontent.length;i++){
        if(i<num){
            boxHeight[i]=ccontent[i].offsetHeight;
        }
        else {
            var  boxminheight=Math.min.apply(null,boxHeight);
            var minheightlocation=getMinHeightlocation(boxHeight,boxminheight);
            ccontent[i].style.position="absolute";
            ccontent[i].style.top=boxminheight+"px";
            ccontent[i].style.left=ccontent[minheightlocation].offsetLeft+"px";
 //将最小高度的照片加上下一行第一张照片的高度,然后再比较最小的高度
            boxHeight[minheightlocation]=boxHeight[minheightlocation]+ccontent[i].offsetHeight;
        }
    }
}
//得到最小图片高度的位置
function getMinHeightlocation(boxHeight,boxminheight){
    for(var i in boxHeight){
        if(boxHeight[i]==boxminheight){
            return i;
        }
    }
}
4.当图片能够铺满一个页面时,我们将其他的图片用滚动条拖拉的方式加载出来,会给我们带来很多方便
    window.onload=function(){
    imgLocation("container","box");
    var Data={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"}]};
    window.onscroll= function () {
        if(checkFlag()){
            var cparent=document.getElementById("container");
            for(var i=0;i<Data.data.length;i++){
                var ccontent=document.createElement("div");
                ccontent.className="box";
                cparent.appendChild(ccontent);
                var boximg=document.createElement("div");
                boximg.className="box_img";
                ccontent.appendChild(boximg);
                var img=document.createElement("img");
                img.src="imagestore/"+Data.data[i].src;
                boximg.appendChild(img);
            }
            imgLocation("container","box");
        }
    }
}
//得到要加载的方法,查找滚动条
function checkFlag(){
    var cparent=document.getElementById("container");
    var ccontent=getElement(cparent,"box");
    var lastHeight=ccontent[ccontent.length-1].offsetTop;
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
    //当最后一张图片的高度比我们看到的页面和滚动条剩余部分小时,进行加载
    if(lastHeight<scrollTop+pageHeight){
        return true;
    }
}
html文档:
<div id="container">
    <div class="box">
        <div class="box_img"><img src="image/1唐老鸭.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/2小猴.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/3人.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/4城堡.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/5小黄.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/6小绿虫.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/21皮卡丘.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/22蛋蛋.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/23小粉.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/1唐老鸭.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/2小猴.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/3人.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/4城堡.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/1唐老鸭.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/2小猴.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/3人.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/4城堡.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/5小黄.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/6小绿虫.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/21皮卡丘.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/22蛋蛋.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/23小粉.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/1唐老鸭.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/2小猴.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/3人.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/4城堡.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/6小绿虫.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/21皮卡丘.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/22蛋蛋.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/23小粉.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/1唐老鸭.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/2小猴.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/3人.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/4城堡.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/1唐老鸭.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/2小猴.jpg"></div>
    </div>
    <div class="box">
        <div class="box_img"><img src="image/3人.jpg"></div>
    </div>
</div>


© 著作权归作者所有

共有 人打赏支持
下一篇: requireJS搭建
溪语_8023
粉丝 0
博文 27
码字总数 17461
作品 0
杭州
私信 提问
JavaScript实现瀑布流布局

关于瀑布流布局,(http://ued.taobao.org/blog/2011/09/waterfall/)这个博客中提供了几种实现思路,讲得很明白了,最近在学习JavaScript,写了一个使用JavaScript实现的瀑布流,代码托管在...

FuYung
2015/07/31
0
0
thinkPHP实现瀑布流的方法

thinkPHP实现瀑布流的方法 文章TAG:thinkphp 瀑布流 过期已备案域名,注册就能用!终身VIP会员,畅享源码下载织梦精美仿站,火热预定中! 本文实例讲述了thinkPHP实现瀑布流的方法。分享给大...

thinkyoung
2015/10/10
0
0
小程序之图片瀑布流(最全实现方式,额外加送懒加载)

效果图 来来来,看啊看,外面的世界多好看, 效果图展示的是瀑布流布局 && 懒加载的效果 数据 图片数据来源张鑫旭的网络日志 先说下我们的图片链接格式 所有的链接都是这样的格式,我们需要改...

小心夹手
05/11
0
0
瀑布流布局(基于多栏列表流体布局实现)

转在前面:(淘宝UED) 3) 绝对定位。即 Pinterest ,Mark之,KISSY 采用的方式: 可谓是最优的一种方案,方便添加数据内容,窗口变化,列数/数据块都会自动调整; 线上例子。 缺点: 需要实现...

林文安
2012/05/31
0
0
做一名合格的前端开发工程师(12篇)——第一篇 Javascript加载执行问题探索

做一名合格的前端开发工程师(12篇)——第一篇 Javascript加载执行问题探索 楼主做前端开发一年多了,对前端的见解还是多多少少有一点的,今天特拿出来跟大家分享分享。 做前端开发少不了各...

蜗牛奔跑
2015/06/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

转换 bytes 为 kb/mb/gb/tb/pb…

智能转换 bytes 为 kb/mb/gb/tb/pb… 用到了 math 模块中的一些函数 #!/usr/bin/env python# -*- coding: utf-8 -*-"""智能转换 bytes 为 kb/mb/gb/tb/pb..."""import mathdef conv...

郭恩洲_OSC博客
3分钟前
0
0
Mysql导出sql语句的方法及可能遇到的mysqldump: command not found

解决办法: 打开terminal    输入vi ~/.bash_profile    添加如下三行代码:    #mysql  PATH=$PATH:/usr/local/mysql/bin  export    保存并退出...

Liens
3分钟前
0
0
一文读懂,深入浅出 RPC框架

RPC 功能目标 RPC 的主要功能目标是让构建分布式计算(应用)更容易,在提供强大的远程调用能力时不损失本地调用的语义简洁性。为实现该目标,RPC 框架需提供一种透明调用机制让使用者不必显...

别打我会飞
4分钟前
0
0
sed关于打印

p命令用来打印文本行 跟替换命令中的p标记类似,p命令可以打印sed编辑器输出中的一行。 我们这主要还是用,下面的测试吧 我们可以试一下 echo 'hello world,xin!' | sed 'p' 如果我还是用tes...

woshixin
15分钟前
0
0
【转载】缓存穿透,缓存击穿,缓存雪崩解决方案分析

前言 设计一个缓存系统,不得不要考虑的问题就是:缓存穿透、缓存击穿与失效时的雪崩效应。 缓存穿透 缓存穿透是指查询一个一定不存在的数据,由于缓存是不命中时被动写的,并且出于容错考虑...

xiaomin0322
21分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部