js实现瀑布流加载图片效果
今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。原理是:1.设定一行中的列数;2.取第一行中每一个div的高度并把每一个高度放进一个数组中;3.算出数组中最小高度的index值;4.把第二行的第一个div放到最小高度的div的下方并把重新算出的高度值放进数组中,重新计算最小高度的index值;5.以此类推实现多栏布局的瀑布流效果;6.如果最后一张div的高度已滚动出现在底部时创建新的div添加到最后一张的后面,不断循环以达到加载效果;接下来代码实现。
<div id="main">
<div class="box">
<div class="Pic">
<img src="data:images/0.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/1.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/2.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/3.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/4.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/5.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/6.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/7.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/8.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/9.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/10.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/11.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/12.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/13.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/14.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/15.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/16.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/17.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/18.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/19.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/20.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/21.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="data:images/22.jpg" alt="" />
</div>
</div>
</div>
*{padding: 0;margin: 0;}
#main{
width: 1000px;
margin: 0 auto;
position: relative;
}
.box{
display: inline-block;
float: left;
padding: 10px 0 0 10px;
}
.Pic{
border: 1px #ccc solid;
padding: 10px;
border-radius: 8px;
}
.Pic img{
width: 162px;
}
js代码:
<script>
window.onload=function(){
waterFall('main','box');
var dataInt={
"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"}]
}; /*滚动条滚动时触发的事件*/
window.onscroll=function(){
if(checkIsSlide()){ //结果返回是true则执行
var omain=document.getElementById('main');
/*添加div到页面上*/
for(var l=0;l<dataInt.data.length;l++){
var box=document.createElement('div');
box.className="box";
omain.appendChild(box);
var pic=document.createElement('div');
pic.className='Pic';
box.appendChild(pic);
var oimg=document.createElement('img');
oimg.src="data:images/"+dataInt.data[l].src;
pic.appendChild(oimg);
}
waterFall('main','box'); //新添加的div都要重新执行waterFall方法,以实现瀑布流效果
}
}
}
/*实现瀑布流效果,多栏布局*/
function waterFall(parent,pid){ //传两个参数,父元素parent和子元素pid
var oparent=document.getElementById(parent); //获取父元素
var opid=getClass(oparent,pid); //获取父元素下的classname为pid的所有子元素
var cols=Math.floor(oparent.offsetWidth/opid[0].offsetWidth); //父元素宽度/一个子元素的宽度,即一行的列数
var arrH=[]; //存放每一列的高度的数组
for(var j=0;j<opid.length;j++){
if(j<cols){
arrH.push(opid[j].offsetHeight);//把第一行的高度都放进数组中
}else{ //第二行开始
var minH=Math.min.apply(null,arrH); //计算arrH的最小值
var Index=getHIndex(arrH,minH); //使用getHIndex方法获取最小值的index值
/*把之后的div放到最小值div的下方*/
opid[j].style.position='absolute';
opid[j].style.top=minH+'px';
opid[j].style.left=opid[0].offsetWidth*Index+'px';
arrH[Index]+=opid[j].offsetHeight; //数组中的最小值加上已放在下方的div的高度值并重新循环
}
} } /*获取父元素下的classname为cls的所有元素*/
function getClass(parent,cls){
var obj=parent.getElementsByTagName('*');
var Clsarr=[];
for(var i=0;i<obj.length;i++){
if(obj[i].className==cls){
Clsarr.push(obj[i]);
}
}
return Clsarr;
}
/*获取arr数组中的最小值minH的Index值*/
function getHIndex(arr,minH){
for(var k=0;k<arr.length;k++){
if(arr[k]==minH){
return k;
}
}
}
/*判断当前滚动的高度时候大于最后的div出现在底部的高度值,即是否要加载*/
function checkIsSlide(){
var omain=document.getElementById('main');
var obox=getClass(omain,'box');
var lastTop=obox[obox.length-1].offsetTop+Math.floor(obox[obox.length-1].offsetHeight/2);
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
var documentH=document.documentElement.clientHeight;
return (lastTop)<(scrollTop+documentH)?true:false;
}
</script>
效果图如下:
推荐网址:http://www.imooc.com/learn/101 详细讲解瀑布流布局的教学视频
js实现瀑布流加载图片效果的更多相关文章
- WAP用户评论简单实现瀑布流加载
wap端经常会遇到产品或者评论的加载,但是分页的体验不是很好,所以选择通过js实现瀑布流加载方式. 第一步:需要动态加载的主要内容,这里需要动态加载的是li标签的内容 <ul class=&qu ...
- js图片加载效果(延迟加载+瀑布流加载)
概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...
- QImage与QPixmap加载图片效果(QImage不能拉伸图片,QPixmap默认拉伸图片)
QImage与QPixmap加载图片 效果 . 分类: QT开发 qtQtQT PixmapTest::PixmapTest(QWidget *parent) : QDialog(parent) {t ...
- css3多列布局瀑布流加载样式
看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...
- JS实现点击加载更多效果
适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊) 点击加载更多效果: 第一个和第二个参数分别是btn和ul的DOM(必填) ...
- [JS] 瀑布流加载
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- js处理img标签加载图片失败,显示默认图片
1.第一种方法: 如果已经引入了jquery插件,就很好办.没有的话,如果实在需要,可以附上代码: script(type='text/javascript', src="http://aj ...
- JS教程之实现加载图片时百分比进度
思路:思路其实很简单,ajax执行时,会生成一个event对象,其中会包含要加载的文件的大小和当前已经加载完成部分的大小,通过这两个值即可计算出百分比 事件介绍onprogress 当浏览器正在加载媒 ...
- ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项
首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...
随机推荐
- shell-001:记录每天的磁盘情况
# shell-100只是为了练习!!适合新手! #!/bin/bash # 此脚本是记录每天的磁盘情况,记录保存30天! # 当前的日期 current_time=$(date +%F) # 保存的 ...
- windows xp 环境下 Oracle8i 双击安装文件无反应的解决办法
今天调试一份比较老的程序,数据库用的是Oracle8i,在本地xp系统上搞了半天,双击安装文件就是没反应! 在网上整理了一下解决办法: 1.将ORACLE软件拷贝到硬盘. (比如我拷贝到:F:\Ora ...
- Hero
Time Limit:3000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Description When pl ...
- 爬取实时变化的 WebSocket 数据(转载)
本文转自:https://mp.weixin.qq.com/s/fuS3uDvAWOQBQNetLqzO-g 一.前言 作为一名爬虫工程师,在工作中常常会遇到爬取实时数据的需求,比如体育赛事实时数据. ...
- mutillidae之注册页面的Insert型报错注入
http://127.0.0.1/mutillidae/index.php?page=register.php 1.注册一个用户试一试,发现页面只提示用户注册成功信息,并五其它可回显信息,果断尝试盲注 ...
- 从零开始学Linux(11)--more
more命令,是将文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空格键(space)就往下一页显示,按 b 键就会往回(back)一页显示,而且还 ...
- Android Zygote进程启动分析
dvm,app进程,linux进程三者关系 DVM指 dalivk 的虚拟机.每一个 Android 应用程序都在它自己的进程中运行,都拥有一个独立的 Dalvik 虚拟机实例.而每一个 DVM 都是 ...
- Python-2.7 配置 tab 自动补全功能
作者博文地址:http://www.cnblogs.com/liu-shuai/ 之前一直使用shell编程,习惯了shell的 tab 自动补全功能,而Python的命令行却不支持 tab 自动补全 ...
- 每日一问:Python生成器和迭代器,with上下文管理工具
1.生成器: 1.1 起源: 如果列表中有一万个元素,我们只想要访问前面几个元素,对其进行相关操作,通过for循环方式效率太低,并且后面的元素会浪费内存,还会受到内存限制,所以产生生成器来解决这个问题 ...
- Wireshark使用技巧
Wireshark使用技巧 在分析网络时,包应该尽量的小,只要能定位问题即可. 1. 只抓包头,在wireshark中可以设置抓包大小. 如果使用tcpdump命令: [root@server_1 / ...