瀑布流第一节课
下面代码最终效果点（运行代码）看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>瀑布流第一节课</title> <style type="text/css"> #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 darkgray; box-shadow: 0px 0px 6px 5px darkgrey; border-radius: 5px; } #main .pin .box img{ width: 205px; } </style> <script type="text/javascript"> window.onload = function(){ var oparent = document.getElementById('main'); var apin = getClassObj(oparent,'pin'); //调用getClassObj(); oparent父级 pin子级 //alert(apin.length); //看一下捉取成功没有 //获取窗口宽度 除以apin[0]的第0个，第一个，随便都行 // 看它能放得下多少个apin然后取整 var iptinw = apin[0].offsetWidth; // var num = Math.floor(document.documentElement.clientWidth/apin[0].offsetWidth); var num = Math.floor(document.documentElement.clientWidth/iptinw); //获得视窗的宽度除去其中的一个,然后取整 // oparent.style.cssText = 'width:'+num*apin[0].offsetWidth+'px';margin:0 auto; oparent.style.cssText = 'width:'+num*iptinw+'px;margin:0 auto;'; // 把后面加进来的图片,找高度最低的图片下面加 var compareAarr = []; // var str = ''; //''字符串 弹出来一下 // num 只比较第一排的 // for(var i=0;i<num;i++){ // 循环全部的apin for(var i=0;i<apin.length;i++){ if (i<num) { // compareAarr[i]数组里面的i compareAarr[i] = apin[i].offsetHeight; }else{ var minH = Math.min.apply({},compareAarr);//用这个数函数取出最小高度那个的值 需要两个参数 填一个空对像({},compareAarr) 和(null,compareAarr)都行 // var minkey 用一个变量把它接走 var minKey = getMinKey(compareAarr,minH); //调用下面写的函数 compareAarr把这个数组放进去，然后放进最小值 //alert(minKey); // alert(minH); 试了一下取得最小的高度的那个成功 apin[i].style.Position = 'absolute'; // 没插件不用写 apin[i].style.top = minH + "px"; apin[i].style.left = apin[minKey].offsetLeft + "px"; compareAarr[minKey] += apin[i].offsetHeight; //+=的意思是 a+=b 就是a=a+b 解释：把a+b的值赋给a } // str += i+'=>'+apin[i].offsetHeight+'\n'; // '\n'换行 弹出来一下 } //alert(str); // 弹出正常获得数值 // alert(compareAarr);试一下获得它们的高度成功offsetHeight // var minH = Math.min.apply({},compareAarr);//用这个数函数取出最小高度那个的值 需要两个参数 填一个空对像({},compareAarr) 和(null,compareAarr)都行 // var minkey 用一个变量把它接走 // var minKey = getMinKey(compareAarr,minH); //调用下面写的函数 compareAarr把这个数组放进去，然后放进最小值 //alert(minKey); // alert(minH); 试了一下取得最小的高度的那个成功 // apin[num].style.Position = 'absolute'; // 没插件不用写 // apin[num].style.top = minH + "px"; // apin[num].style.left = apin[minKey].offsetLeft + "px"; // 重新获取一下,第2,3小后面的,要更新一下数组里面的高度 compareAarr上面的数组 minKey这个是刚才获得最小的 // compareAarr[minKey] += apin[num].offsetHeight; //+=的意思是 a+=b 就是a=a+b 解释：把a+b的值赋给a // alert(compareAarr); // 重新获取一下 var minH = Math.min.apply({},compareAarr); var minKey = getMinKey(compareAarr,minH); // 最小的那个选出来了补上去,再往下第2小,3小的有后面加进来的数据还要补上去 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 getMinKey(arr,minH){ //arr数组,minH最小高度 //for...in 语句用于对数组或者对象的属性进行循环操作。 使用 for ... in 循环遍历数组。 //for (变量 in 对象) //{ // 在此执行代码 //} for (key in arr) { if (arr[key]==minH) { //当arr这个数组高度key=minH等于这个最小高度 这样就匹配到了 return key; //只要得到这个key就好，可以直接返回去函数 } } } // 通过class选择元素 parent父级 className 类名 function getClassObj(parent,className){ var obj = parent.getElementsByTagName('*'); //'*' 这个星就是全部的意思 var result = []; //数组 for (var i=0;i<obj.length;i++) { if (obj[i].className == className) { //如果obj[i].className == 传过来的className匹配到了 result.push(obj[i]); //push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 } } return result; } </script> </head> <body> <div id="main"> <div class="pin"> <div class="box"> <img src="https://www.qiquanji.com/data/img/dmj/201903061551840509108737.png"/> </div> </div> <div class="pin"> <div class="box"> <img src="https://www.qiquanji.com/data/img/dmj/201903061551840509137756.png"/> </div> </div> <div class="pin"> <div class="box"> <img src="https://www.qiquanji.com/data/img/dmj/201903061551840509164082.png"/> </div> </div> <div class="pin"> <div class="box"> <img src="https://www.qiquanji.com/data/img/dmj/201903061551840510127179.png"/> </div> </div> <div class="pin"> <div class="box"> <img src="https://www.qiquanji.com/data/img/dmj/201903061551840510188979.png"/> </div> </div> <div class="pin"> <div class="box"> <img src="https://www.qiquanji.com/data/img/dmj/201903061551840510935198.png"/> </div> </div> <div class="pin"> <div class="box"> <img src="https://www.qiquanji.com/data/img/dmj/201903061551840510435945.png"/> </div> </div> <div class="pin"> <div class="box"> <img src="https://www.qiquanji.com/data/img/dmj/201903061551840511145712.png"/> </div> </div> <div class="pin"> <div class="box"> <img src="https://www.qiquanji.com/data/img/dmj/201903061551840511150837.png"/> </div> </div> <div class="pin"> <div class="box"> <img src="https://www.qiquanji.com/data/img/dmj/201903061551840511174371.png"/> </div> </div> </div> </body> </html> 
原文链接：https://www.qiquanji.com/post/7587.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知