js原生代码写瀑布流

来源：互联网发布：win10配置php 编辑：程序博客网时间：2024/06/04 18:26

在看代码之前,解释一下瀑布流

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。

更多优缺点和其他详细介绍可以参照 http://baike.baidu.com/view/7151782.htm?fr=aladdin

下面是代码

html 部分这部分没什么好说的

<html><head><title>瀑布流</title><mate charset="utf-8" /></head><body><div id="main"><div class="box"><div class="pic"><img src="img/0.jpg" /></div></div>//省略 若干重复 class为box的div 图片地址随需求更换</div></html>

css 加点简单样式

*{margin:0; padding:0;}#main{position:relative; margin:0 auto;}.box{padding:15px 0 0 15px; float:left;}.pic{padding:10px; border:1px solid #ccc; border-radius:5px; border-shadow:0 0 5px #ccc;}.pic img{width:165px; height:auto;}

js部分还有很多值得优化的地方

window.onload=function(){waterfall('main','box');var num = 12;//滚动加载的图片数量 可自定义window.onscroll=function(){if (checkScrollSlide()){var parent = document.getElementById('main');for (var i = 0; i < num; i++){var oBox=document.createElement('div');oBox.className='box';parent.appendChild(oBox);var oPic=document.createElement('div');oPic.className='pic';oBox.appendChild(oPic);var oImg=document.createElement('img');oImg.src = "img/" + parseInt(Math.random()*36) + ".jpg";oPic.appendChild(oImg);}waterfall('main','box');}}}function waterfall(parent,box){//将main下的所有class为box的元素取出来var oParent = document.getElementById(parent);var oBoxs = getByClass(oParent,box);//计算列数var oBoxW=oBoxs[0].offsetWidth;var clos = Math.floor(document.documentElement.clientWidth / oBoxW);//设置main的宽oParent.style.cssText='width:'+oBoxW*clos+'px; margin:0 auto;'var hArr = [];for (var i = 0; i < oBoxs.length; i++){if (i < clos){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=oBoxs[index].offsetLeft+'px';hArr[index] += oBoxs[i].offsetHeight;}}}//根据class获取元素function getByClass(parent,clsName){var boxArr=new Array(), oElements=parent.getElementsByTagName('*');for (var i = 0; i < oElements.length; i++){if(oElements[i].className == clsName){boxArr.push(oElements[i]);}}return boxArr;}function getMinhIndex(arr,val){for (var i = 0; i < arr.length; i++){if(arr[i] == val)return i;}}//检测是否具备了加载条件function checkScrollSlide(){var oParent=document.getElementById('main');var oBoxs = getByClass(oParent,'box');var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight / 2);<pre code_snippet_id="372135" snippet_file_name="blog_20140601_4_3290862" name="code" class="javascript">// 为了同时兼容标准模式和混杂模式获取窗口高度和滚动条位置var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;var height = document.body.clientHeight || document.documentElement.clientHeight;return lastBoxH < scrollTop + height;}

0 0