文档章节

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

溪语_8023
 溪语_8023
发布于 2015/11/22 20:03
字数 1369
阅读 40
收藏 2
点赞 0
评论 0
在某些网站中,用户需要浏览大量的图片,当我们滑动鼠标下拉时自动刷新显示更多地图片会给用户带来好的体验,因此需要用到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>


© 著作权归作者所有

共有 人打赏支持
溪语_8023
粉丝 0
博文 26
码字总数 17289
作品 0
杭州
thinkPHP实现瀑布流的方法

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

thinkyoung ⋅ 2015/10/10 ⋅ 0

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

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

小心夹手 ⋅ 05/11 ⋅ 0

weex eros框架源码解析

weex eros是基于alibaba weex框架进行二次封装的客户端跨平台开发框架,主要是为前端开发者(可以不用熟悉客户端开发)提供的一站式客户端app开发解决方案。官网地址为:https://bmfe.github...

雅爸学技术 ⋅ 05/27 ⋅ 0

前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆 ⋅ 06/14 ⋅ 0

前端要以正确的姿势学习编译原理(上篇)

前端要以正确的姿势学习编译原理(上篇) 发布于 02:05 文章被以下专栏收录

brambles ⋅ 05/22 ⋅ 0

云 GIS 网络客户端开发平台 - iClient-JS

SuperMap iClient JavaScript (简称 iClient-JS )是云 GIS 网络客户端开发平台。基于现代 Web 技术栈全新构建,是 SuperMap 云四驾马车和在线 GIS 平台系列产品的统一 JS 客户端。集成了领先...

ahnan ⋅ 2017/12/04 ⋅ 5

Lynx技术分析-JS引擎扩展设计

JS Binding 技术 Lynx(一个高效的跨平台框架) 的 JS Binding 技术最主要的目的是搭建一个高效的与 JS 引擎解耦的通信桥梁,同时具备 JS 引擎切换的能力。该技术经历了多次迭代,最终通过抽...

hxxft ⋅ 05/15 ⋅ 0

浅谈前端入门以及项目初创的经验

从去年1月份到今天恰好一年,值此值得纪念的一天,来点评一下这一年来作为一个前端工程师遇到的坑和总结一些工作经验。 前端的入门从HTML的标签开始,分为 语义化 样式 语义相当于word的格式...

qwop446 ⋅ 2016/01/17 ⋅ 0

学习Javascript的8张思维导图

分别归类为:  javascript变量  javascript运算符  javascript数组  javascript流程语句  javascript字符串函数  javascript函数基础  javascript基础DOM操作  javascript正则表达式...

thinkyoung ⋅ 2014/09/23 ⋅ 0

学习前端开发,一段心路历程,这个世界根本没有速成的方法

在已经成功的为大家讲解了很多篇有关前端开发的技术文章之后,想跟每一位前端开发人员谈一谈学习前端开发的一些心得。本篇文章我就来给大家说一说我在学习前端开发过程中的一些经验,我把它们...

大数据大佬 ⋅ 06/08 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

聊聊spring cloud gateway的LoadBalancerClientFilter

序 本文主要研究一下spring cloud gateway的LoadBalancerClientFilter GatewayLoadBalancerClientAutoConfiguration spring-cloud-gateway-core-2.0.0.RELEASE-sources.jar!/org/springfram......

go4it ⋅ 26分钟前 ⋅ 0

详解:Nginx反代实现Kibana登录认证功能

Kibana 5.5 版后,已不支持认证功能,也就是说,直接打开页面就能管理,想想都不安全,不过官方提供了 X-Pack 认证,但有时间限制。毕竟X-Pack是商业版。 下面我将操作如何使用Nginx反向代理...

问题终结者 ⋅ 32分钟前 ⋅ 0

002、nginx配置虚拟主机

一、nginx配置虚拟主机可分为三种方式,分别为: 1、基于域名的虚拟主机,通过域名来区分虚拟主机——应用:外部网站 2、基于端口的虚拟主机,通过端口来区分虚拟主机——应用:公司内部网站...

北岩 ⋅ 36分钟前 ⋅ 0

shell脚本之死循环写法

最近在学习写shell脚本,在练习if while等流程控制时,突然它们的死循环写法是怎么样的?经过百度与亲测记录如下: for死循环 #! /bin/bashfor ((;;));do date sleep 1d...

hensemlee ⋅ 38分钟前 ⋅ 0

苹果的ARKit2.0有多可怕,看了就知道

序言 ARKit主要由三部分组成: 跟踪(Tracking) 跟踪是ARKit的核心组件之一,其提供了设备在物理世界中的位置与方向信息,并对物体进行跟踪,如人脸。 2.场景理解(Scene Understanding) 场...

_小迷糊 ⋅ 39分钟前 ⋅ 0

5.1 vim介绍 5.2 vim移动光标 5.3 ,5.4vim一般模式下移动光标,复制粘贴

vim命令 vim是vi的一个升级版;vim可以显示文字的颜色 安装vim这一个包vim-enhanced 如果不知道安装包,可以使用 命令下面命令来查看vim命令是那个包安装的。 [root@linux-128 ~]# yum prov...

Linux_老吴 ⋅ 42分钟前 ⋅ 0

vim一般模式

vim 是什么 vim是什么 ? 在之前接触Linux,编辑网卡配置文件的时候我们用过了vi ,vim简单说就是vi的升级版,它跟vi一样是Linux系统中的一个文本编辑工具。 如果系统中没有vim ,需要安装一...

李超小牛子 ⋅ 50分钟前 ⋅ 0

docker实战

构建企业级Docker虚拟化平台实战 重点剖析虚拟化和云计算概念; 分析Docker虚拟化的概念和原理; 从0开始实战Docker虚拟化平台; 基于Docker构建Nginx WEB服务器和CentOS虚拟机; 基于开源监...

寰宇01 ⋅ 今天 ⋅ 0

vim介绍、vim颜色显示和移动光标、vim一般模式下移动光标、一般模式下复制粘贴剪切

VIM Vim 是 UNIX 文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff),语法高亮,全面的帮助系统,本地脚本(Vimscript),和便于选择的...

蛋黄Yolks ⋅ 今天 ⋅ 0

springboot+mockito测试controller层遇到的问题

使用MockitoJUnitRunner测试的一个例子,原来报错无法找到bean, 类似的异常如下:createBeanError..... 原因:是因为@Runwith使用了SpringRunner,应该修改为MockitoJUnitRunner 代码如下: ...

writeademo ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部