javascript实现仿百度图片的瀑布流加载效果

由于没有服务器，就用一个json字符串作为下拉时加载图片数据的来源了

html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="js/waterfall.js"></script>
<style type="text/css">
 *{padding: 0;margin:0;}
 #main{
  position: relative;
 }
 .pin{
  padding: 15px 0 0 15px;
  float:left;
 }
 .box{
  padding: 10px;
  border:1px solid #ccc;
  box-shadow: 0 0 6px #ccc;
  border-radius: 5px;
 }
 .box img{
  width:162px;
  height:auto;
 }
</style>
</head>
<body>
<div id="main">
 <div class="pin">
  <div class="box">
   <img src="./images/1.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/2.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/3.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/4.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/5.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/6.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/7.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/8.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/9.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/10.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/11.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/12.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/13.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/14.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/15.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/16.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/17.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/18.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/19.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/20.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/21.jpg"/>
  </div>
 </div>
</div>
</body>
</html>

JSWallper.js:

window.onload=function(){

 waterfall('main','pin');

 var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};

 window.onscroll=function(){
  if(checkscrollside()){
   var oParent = document.getElementById('main');// 父级对象
   for(var i=0;i<dataInt.data.length;i++){
    var oPin=document.createElement('div'); //添加 元素节点
    oPin.className='pin';     //添加 类名 name属性
    oParent.appendChild(oPin);    //添加 子节点
    var oBox=document.createElement('div');
    oBox.className='box';
    oPin.appendChild(oBox);
    var oImg=document.createElement('img');
    oImg.src='./images/'+dataInt.data[i].src;
    oBox.appendChild(oImg);
   }
   waterfall('main','pin');
  };
 }
}

/*
 parend 父级id
 pin 元素id
*/
function waterfall(parent,pin){
 var oParent=document.getElementById(parent);// 父级对象
 var aPin=getClassObj(oParent,pin);// 获取存储块框pin的数组aPin
 var iPinW=aPin[0].offsetWidth;// 一个块框pin的宽
 var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
 oParent.style.cssText='width:'+iPinW*num+'px;margin:0 auto;';//设置父级居中样式：定宽+自动水平外边距

 var pinHArr=[];//用于存储 每列中的所有块框相加的高度。a
 for(var i=0;i<aPin.length;i++){//遍历数组aPin的每个块框元素
  var pinH=aPin[i].offsetHeight;
  if(i<num){
   pinHArr[i]=pinH; //第一行中的num个块框pin 先添加进数组pinHArr
  }else{
   var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minH
   var minHIndex=getminHIndex(pinHArr,minH);
   aPin[i].style.position='absolute';//设置绝对位移
   aPin[i].style.top=minH+'px';
   aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';
   //数组 最小高元素的高 + 添加上的aPin[i]块框高
   pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加了块框后的列高
  }
 }
}

 /*
 *通过父级和子元素的class类 获取该同类子元素的数组
 */
function getClassObj(parent,className){
 var obj=parent.getElementsByTagName('*');//获取 父级的所有子集
 var pinS=[];//创建一个数组 用于收集子元素
 for (var i=0;i<obj.length;i++) {//遍历子元素、判断类别、压入数组
  if (obj[i].className==className){
   pinS.push(obj[i]);
  }
 };
 return pinS;
}
/****
 *获取 pin高度 最小值的索引index
 */
function getminHIndex(arr,minH){
 for(var i in arr){
  if(arr[i]==minH){
   return i;
  }
 }
}

function checkscrollside(){
 var oParent=document.getElementById('main');
 var aPin=getClassObj(oParent,'pin');
 var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性
 var documentH=document.documentElement.clientHeight;//页面高度
 return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数
}

演示图：

源码下载：http://www.jb51.net/jiaoben/452663.html

演示地址：http://demo.jb51.net/js/2016/JSWallper/

赞 (0)

相关推荐

  • javascript瀑布流式图片懒加载实例

    最近项目使用到了"懒加载",现在更新一般,因为平时主要使移动端的开发所以库文件使用的是zepto.js .当然也可以和jQuery 通用. 代码如下: /** * Created by zhiqiang on 2015/10/14. * hpuhouzhiqiang@gmail.com * 图片的懒加载 **/ function loadImgLazy(node) { var lazyNode = $('[node-type=imglazy]', node), mobileHeight

  • javascript实现瀑布流动态加载图片原理

    本文实例为大家分享了js瀑布流加载效果,动态加载图片,供大家参考,具体内容如下 鼠标滚动事件,当鼠标滚动到下边,动态加载图片. 1. HTML代码     <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现瀑布流效果-动态加载图片</title> <link rel="stylesheet" href="

  • javascript瀑布流式图片懒加载实例解析与优化

    之前写过一版图片"懒加载"的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方. 这篇文章主要就是结合上篇<javascript瀑布流式图片懒加载实例>再来看看图片"懒加载"的一些知识. 图片"懒加载"的主旨: 按照需要加载图片,也就是说需要显示的时候再加载图片显示,减少一次性加载的网络带宽开销. 先来看一段代码: var conf = { 'loadfirst': true, 'loadimg': t

  • 解析javascript瀑布流原理实现图片滚动加载

    解析javascript瀑布流原理实现图片滚动加载

    先科普下瀑布流吧 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格,像美丽说.淘宝网都有使用. 这是我实现的一个效果,就是怎么滚动都加载不玩.就跟瀑布一样流啊流! 这里的实现方式我们只说Js实现方法 实现原理: 对容器中已有数据块元素进行第一次计算1 容器总宽度 2 列宽度  3 最小列数 ,得到列数

  • js图片加载效果实例代码（延迟加载+瀑布流加载）

    主要做了两种图片加载的效果 一种是遇到页面图片比较多的时候,带读条效果的加载提示(为了验证正确加载,设置了1秒钟的加载间隔时间) 另外一种是根据滑块的位置进行图片的预加载,在用户不察觉的情况下,实现瀑布流的加载效果 一 延迟加载 主要思路: HTML的img标签中,将正确的地址存在data-src属性中,给所有图片设置一个转圈圈的loading图片作为background js中,依次读取每一个img,将data-src中的地址替换到src中,去掉background 每成功加载一张图片,进度条

  • JavaScript实现瀑布流以及加载效果

    JavaScript实现瀑布流以及加载效果

    一.瀑布流是个啥? 瀑布流,是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 最早采用瀑布流布局的网站是Pinterest,逐渐在国内流行开来,比如我们熟知的百度图片的布局,在"很久"以前,百度图片还是需要一页一页的点击进行查看更多图片,而现在的瀑布流布局使用户查找图片更加方便. 二.瀑布流的优缺点 优点: 1.节省了页面的空间,不再需要导航和页码按钮. 2.增强了用户的体验,使用户的体验更多的是在于浏览图

  • 基于JavaScript实现无限加载瀑布流

    本文实例为大家分享了JS实现无限加载瀑布流展示的具体代码,供大家参考,具体内容如下 1.在外层的div中,插入4个ul,ul左浮动 2.每次在创建节点之后,插入节点之前,要获取每个ul的高度,找到最小的高度,然后将新创建的li节点插入该ul中 3.当文档的高度 - 文档的可视高度 <= 鼠标的滑动距离时 开始继续创建节点 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

  • javascript实现瀑布流加载图片原理

    javascript实现瀑布流加载图片原理

    讲一下大概的原理吧,还是先上图:  功能描述: 根据不同菜单的属性值分别加载不同的数据 下拉滚动条到一定位置预加载图片,滚动条拉到最底下的时候渲染html: 鼠标移到菜单,切换各个图片列表: 鼠标移到图片列表上,显示详细信息:  技术实现方案: 先梳理一下从加载到显示的流程: 1. 加载数据 2. 拼接HTML写入到页面 3. 检查刚刚写入的HTML中的img是否全部加载完成,如果是,进入5.否则进入4 4. 等待图片加载完成 5. 计算每个元素的位置 一开始的时候最头疼的是如何定位的问题,后来

  • JavaScript实现图片自动加载的瀑布流效果

    JavaScript实现图片自动加载的瀑布流效果

    先给大家展示下效果图: 向下滑动网页的时候能够自动加载图片并显示. 盛放图片的盒子模型如下: <div class="box"> <div class="box_img"> <img src="Img/8.jpg"> </div> </div> 设置img-width为150px,然后box_img添加内边距和阴影效果,box的外边距为0,添加内边距.盒子的宽度是由img-width和边

  • 利用JS实现简单的瀑布流加载图片效果

    利用JS实现简单的瀑布流加载图片效果

    今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 原理是: 1.设定一行中的列数: 2.取第一行中每一个div的高度并把每一个高度放进一个数组中: 3.算出数组中最小高度的index值: 4.把第二行的第一个div放到最小高度的div的下方并把重新算出的高度值放进数组中,重新计算最小高度的index值: 5.以此类推实现多栏布局的瀑布流效果: 6.如果最后一

随机推荐