html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>瀑布流第二步封装函数</title> <style> *{margin:0px;padding:0px;} #main .pin{ width:225px; height:auto; padding:15px 0px 0px 15px; float:left; } #main .pin .box{ width:205px; height:auto; padding:10px; background:#FFF; border:1px solid #CCC; box-shadow:0px 0px 6px #CCC; border-radius:5px; } #main .pin .box img{ width:205px; } </style> <!-- 页面拖拽插件 --> <script type="text/javascript" src="./js/drag.js"></script> <!-- 瀑布流封装 --> <script type="text/javascript" src="./js/water.js"></script> </head> <body> <div id="main"> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/0.jpg"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/1.jpg"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/2.jpg"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/3.jpg"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/4.jpg"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/5.jpg"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/6.jpg"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/7.jpg"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/8.jpg"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/4.jpg"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/7.jpg"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/8.jpg"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/9.png"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/0.jpg"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/1.jpg"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/2.jpg"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/5.jpg"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/4.jpg"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/0.jpg"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/1.jpg"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/5.jpg"> </div> </div> <div class="pin"><!--每一个小块--> <div class="box"> <img src="./img/3.jpg"> </div> </div> </div> </body> </html>
water.js代码
/** * */ window.onload = function(){ //0调用函数 //定义json数据 var data = [{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'}]; window.onscroll = function(){ if(checkscrollsite()){ //创建父节点 var oParent = document.getElementById('main'); for(i in data){ //alert(data[i].src); //创建父级的元素节点 var oPin = document.createElement('div'); oPin.className = 'pin'; oParent.appendChild(oPin); var oBox = document.createElement('div'); oBox.className = 'box'; oPin.appendChild(oBox); var oImg = document.createElement('img'); oImg.src = './img/'+data[i].src; oBox.appendChild(oImg); } waterfall('main','pin'); } } } /** parent 父级 id pin 具体瀑布流块,class类名 */ function waterfall(parent,pin) { //2.定义父级 var oParent = document.getElementById(parent); //9.调用函数并定义 var aPin = getClassObj(oParent,pin); //alert(aPin.length); var iPinW = aPin[0].offsetWidth; //alert(iPinW); //10.计算页面可以放下多少个图片 var num = Math.floor(document.documentElement.clientWidth/iPinW); //alert(num); //11.设置父级居中的样式 oParent.style.cssText = 'width:'+num*iPinW+'px;margin:0 auto;'; //12准备一个数组 var compareAarr = []; //17定义一个字符串 //var str = ''; //13 for(var i=0;i<aPin.length;i++){ //22设置第一行的数量 if(i<num){ //获取每个图品的offsetHeight值 compareAarr[i] = aPin[i].offsetHeight; //17获取高度的索引 //str += i+'=>'+aPin[i].offsetHeight+'\n'; //23 }else{ //取数组中的最小高度 compareAarr var minH = Math.min.apply({},compareAarr); //获取最小的key值 var minKey = getMinKey(compareAarr,minH); //定位超出宽度多的那个 aPin[i].style.position = 'absolute'; //取超出的那个图片的top值 aPin[i].style.top = minH + 'px'; //设置超出那个图片的left值 aPin[i].style.left = aPin[minKey].offsetLeft + 'px'; //超出最后一个在加一 重新计算最低minH compareAarr[minKey] += aPin[i].offsetHeight; } } //14 取数组中的最小高度 compareAarr //var minH = Math.min.apply({},compareAarr); //19获取最小的key值 //var minKey = getMinKey(compareAarr,minH); //alert(minKey); //alert(minH); //15定位超出宽度多的那个 //aPin[num].style.position = 'absolute'; //16取超出的那个图片的top值 //aPin[num].style.top = minH + 'px'; //20设置超出那个图片的left值 //aPin[num].style.left = aPin[minKey].offsetLeft + 'px'; //21超出最后一个在加一 重新计算最低minH //compareAarr[minKey] += aPin[num].offsetHeight; //alert(compareAarr); //var minH = Math.min.apply({},compareAarr); //var minKey = getMinKey(compareAarr,minH); //aPin[num+1].style.position = 'absolute'; //aPin[num+1].style.top = minH + 'px'; //aPin[num+1].style.left = aPin[minKey].offsetLeft + 'px'; //实现图片的拖拽 for(var i=num;i<aPin.length;i++){ //绝对定位 aPin[i].style.position = 'absolute'; drag(aPin[i]); } } /** * 检测根据浏览器的高度加载图片 */ function checkscrollsite(){ 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); //最后滚动条的高度 var srcollTop = document.documentElement.scrollTop || document.body.scrollTop; // var documentH = document.documentElement.clientHeight; //if(lastPinH<srcollTop+documentH){ // return true; //}else{ // return false; //} return lastPinH<srcollTop+documentH?true:false; } /** 获取数组组最小的键值 arr数组 minH最小键值 */ //18定义一个函数 获取数组(compareAarr)中对应的最小的那个高的值(minH) function getMinKey(arr,minH){ for(key in arr){ if(arr[key] == minH){ return key; } } } /** 通过class选择元素 parent父级 className类名 */ //3.定义一个函数 function getClassObj(parent,className){ //4.定义匹配父级下面所有的元素 var obj = parent.getElementsByTagName('*'); //5.定义一个数组 var result = []; //6.循环obj for(var i=0;i<obj.length;i++){ if(obj[i].className == className){ //7.pushu进result中 result.push(obj[i]); } } //8 return result; }
drag.js代码
//拖拽方法 var zIndex = 1; function drag(obj, vW){ var obj = obj; var vW = vW?vW:document.documentElement.clientWidth; var disX = 0; var disY = 0; obj.onmousedown = function(ev){ var oEvent = ev || event; disX = oEvent.clientX - obj.offsetLeft; disY = oEvent.clientY - obj.offsetTop; obj.style.zIndex = zIndex; zIndex++; if (obj.setCapture) { obj.onmousemove = fnMove; obj.onmouseup = fnUp; obj.setCapture(); } else { document.onmousemove = fnMove; document.onmouseup = fnUp; } function fnUp(){ this.onmousemove = null; this.onmouseup = null; if (this.releaseCapture) this.releaseCapture(); } function fnMove(ev){ var oEvent = ev || event; var l = oEvent.clientX - disX; var t = oEvent.clientY - disY; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var w = vW- obj.offsetWidth; var h = document.documentElement.clientHeight - obj.offsetHeight + scrollTop; if (l < 10) l = 0; if (l > w - 10) l = w; if (t < 10) t = 0; if (t > h - 10) t = h; obj.style.left = l + 'px'; obj.style.top = t + 'px'; } return false; } }
实现效果图: