javascript实现瀑布流效果及图片加载样式
2016-09-29 10:25
711 查看
javascript实现瀑布流效果及图片加载样式:
html代码:<pre name="code" class="html"><DOCTTYPE!>
<html>
<head>
<meta charset='utf-8'>
<link href="index.css" type="text/css" rel="stylesheet">
<script src="index.js" type="text/javaScript"></script>
</head>
<body>
<div id='main'>
<div class="box">
<div class="pic">
<img src="images/1.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/8.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/9.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/10.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg">
</div>
</div>
</div>
</body>
</html>
css代码:
*{ margin: 0px; padding:0px; } #main{ position: relative; } .box{ padding:15px 0 0 15px; float: left; } .pic{ padding:10px 10px 10px 10px; border: 1px solid #ccc; box-shadow: 0 0 5px #ccc; } .pic img{ width: 160px; height: auto; }javascript代码:
window.onload = function(){ waterfall('box','main'); //此处模拟后台元素 var dataInt={"data":[{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'}]} window.onscroll = function(){ if(checkScrollSlide()){ //将数据渲染到页面尾部 var oParent = document.getElementById('main'); for(var i=0;i<dataInt.data.length;i++){ var oBox = document.createElement('div'); oBox.className = 'box'; oParent.appendChild(oBox); var opic = document.createElement('div'); opic.className='pic'; oBox.appendChild(opic); var oimg = document.createElement('img'); oimg.src = "images/" + dataInt.data[i].src; opic.appendChild(oimg); } waterfall('box','main'); } } } function waterfall(box,parent){ var oParent = document.getElementById(parent); var oBoxs = getByClass(box,oParent); //获取图片所占有的全部宽度 var oBoxW = oBoxs[0].offsetWidth; //图片的列数 var cols = Math.floor(document.documentElement.clientWidth/oBoxW); oParent.style.cssText = 'width:' + oBoxW*cols + 'px;margin: 0 auto'; //用数组存放图片高度,为了使下一列的图片从上一行中高度最小的图片下面排列 var hArr = []; for(var i=0;i<oBoxs.length;i++){ if(i<cols){ //获取第一列元素的高度 hArr.push(oBoxs[i].offsetHeight); }else{ var minH = Math.min.apply(null,hArr); var index = getMinhIndex(hArr,minH); oBoxs[i].style.position = 'absolute'; oBoxs[i].style.top = minH + 'px'; oBoxs[i].style.left = index*oBoxW + 'px'; hArr[index] += oBoxs[i].offsetHeight; } } } function getByClass(cName,parent){ var oParent=oParent?document.getElementById(parent):document, eles = new Array(), elements = oParent.getElementsByTagName('*'); for(var i=0;i<elements.length;i++){ if(elements[i].className == cName){ eles.push(elements[i]); } } return eles; } //获取高度最小的元素的索引值 function getMinhIndex(arr,val){ for(var i in arr){ if(arr[i] == val){ return i; } } } //判断是否具备加载效果 function checkScrollSlide(){ var oParent = document.getElementById('main'); var oBoxs = getByClass('box',oParent); var lastBoxH = oBoxs[oBoxs.length-1].offsetTop + Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2); //获取页面滚动的距离,为了兼容,此处有在混合模式下和在标准模式下 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; var height = document.body.clientHeight || document.documentElement.clientHeight; return (lastBoxH < scrollTop+height)?true:false; }
相关文章推荐
- JavaScript实现图片自动加载的瀑布流效果
- JavaScript实现图片自动加载的瀑布流效果
- 利用LruCache和DiskLruCache加载网络图片实现图片瀑布流效果(升级版)
- 利用LruCache加载网络图片实现图片瀑布流效果(基础版)
- javascript实现仿百度图片的瀑布流加载效果
- 利用JS实现简单的瀑布流加载图片效果
- JavaScript实现页面滚动图片加载(仿lazyload效果)
- 利用LruCache和DiskLruCache加载网络图片实现图片瀑布流效果(升级版)
- JavaScript代码实现图片延迟加载并淡入淡出显示效果
- javascript实现仿百度图片的瀑布流加载效果
- javascript实现瀑布流动态加载图片原理
- javacript 实现瀑布流原理和效果, 滚动加载图片【图文解析 附源码】
- HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
- JavaScript实现瀑布流以及加载效果
- 利用LruCache加载网络图片实现图片瀑布流效果(改进版)
- 用原生JavaScript实现图片瀑布流的浏览效果
- javascript实现瀑布流加载图片原理
- JavaScript实现瀑布流图片效果
- recyclerview实现瀑布流效果,加载本地图片