當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

用原生JavaScript实现图片瀑布流的浏览效果

發(fā)布時(shí)間：2025/7/14 javascript 21 豆豆

生活随笔收集整理的這篇文章主要介紹了用原生JavaScript实现图片瀑布流的浏览效果小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

學(xué)習(xí)JS，活躍思維，靈活運(yùn)用的一個(gè)較為典型的學(xué)習(xí)案例。同一個(gè)瀑布流的效果但實(shí)現(xiàn)方式卻很多，利用遞歸、冒泡等等手法都可以達(dá)到你想要的目的。這次要說(shuō)的就是利用類(lèi)似遞歸來(lái)實(shí)現(xiàn)此效果的原創(chuàng)方案。此方案?jìng)€(gè)人認(rèn)為難度系數(shù)較低

1 <?php 2 //沒(méi)有數(shù)據(jù)源,利用遍歷對(duì)應(yīng)文件夾中的所有的圖片得到的數(shù)組模擬成數(shù)據(jù)源 3 $arr = array(); 4 $dir = @opendir('images'); 5 while($file = @readdir($dir)){ 6 if($file == '.' || $file == '..'){ 7 continue; 8 } 9 $arr[] = $file; 10 } 11 @closedir($dir); 12 ?> 13 <!DOCTYPE html> 14 <html> 15 <head> 16 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 17 <title>瀑布流</title> 18 <style type="text/css"> 19 *{padding:0;margin:0} 20 .box{padding:5px;float:left;} 21 .image{padding:5px;border:1px solid #ccc;box-shadow: 0 0 5px #ccc;border-radius:5px;} 22 .image img{width:150px;height:auto;} 23 </style> 24 </head> 25 <body> 26 <div id="container" style=""> 27 <?php foreach($arr as $val):?> 28 <div class="box"> 29 <div class="image"> 30 <img src="images/<?php echo $val?>" /> 31 </div> 32 </div> 33 <?php endforeach;?> 34 </div> 35 </body> 36 <script> 37 window.onload = function(){ 38 imgLocation('container','box'); 39 } 40 window.onresize = function(){ 41 imgLocation('container','box'); 42 } 43 function imgLocation(parent,content){ 44 //取得大盒子的節(jié)點(diǎn)對(duì)象 45 var cparent = document.getElementById(parent); 46 //從大盒子中找到所有放圖片的盒子 47 var ccontent = getChildElement(cparent,content); 48 //由于CSS已經(jīng)規(guī)定所有Img的寬度為150,所以這邊返回的圖片盒子的寬度就是150+5*2+5*2+2 = 172; 49 var imgWidth = ccontent[0].offsetWidth; 50 //利用body體寬度和圖片盒子所在寬度兩者相除得到目前寬度下第一排能擺放的最大個(gè)數(shù) 51 var cols = Math.floor(document.documentElement.clientWidth / imgWidth); 52 //利用計(jì)算出來(lái)的一排最多的個(gè)數(shù)乘以每個(gè)圖片的寬度得到大盒子應(yīng)有的寬度 53 cparent.style.cssText = 'width:'+imgWidth*cols+'px;margin:0 auto;'; 54 console.log(cols); 55 //定義用于存放第一排圖片盒子的高度所用的數(shù)組 56 var BoxHeightArr = []; 57 //循環(huán)遍歷所有圖片盒子 58 for(var i=0;i<ccontent.length;i++){ 59 //利用i的自增獲取第一排所有盒子的高度（這里設(shè)計(jì)的很巧妙哦） 60 if(i<cols){ 61 //將第一排所有盒子的高度追加到之前定義的數(shù)組 62 BoxHeightArr[i] = ccontent[i].offsetHeight; 63 //并且把第一排盒子所有的絕對(duì)定位去掉,不然在實(shí)時(shí)拉伸窗口的時(shí)候會(huì)破壞自適應(yīng) 64 ccontent[i].style.position = ''; 65 }else{ 66 //循環(huán)完第一排時(shí)利用取到的高度數(shù)組從中獲取到最小高度 67 var minHeight = Math.min.apply(null,BoxHeightArr); 68 //自定義函數(shù)取得最小高度所在的盒子的位置(下標(biāo)) 69 var minIndex = getminHeightLocation(BoxHeightArr,minHeight); 70 //修改第二排開(kāi)始擺放的CSS，盒子定位修改成絕對(duì)定位,為后面的移動(dòng)最準(zhǔn)備 71 ccontent[i].style.position = 'absolute'; 72 //把當(dāng)前循環(huán)盒子的Y坐標(biāo)修改成最小盒子的高度（這樣就可以讓當(dāng)前盒子排在第一排最小盒子的下面） 73 ccontent[i].style.top = minHeight + 'px'; 74 //把當(dāng)前循環(huán)盒子的X坐標(biāo)修改成最小盒子所在位置的X坐標(biāo)（達(dá)到對(duì)齊效果） 75 ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px'; 76 //當(dāng)本輪循環(huán)的修改操作全部完成后,更新第一排盒子高度的數(shù)組里的最小高度 77 //現(xiàn)在最小盒子的高度應(yīng)該是之前的高度加上第二排追加上來(lái)的盒子的高度 78 //以此循環(huán)操作所有的盒子就能實(shí)現(xiàn)瀑布流的效果 79 BoxHeightArr[minIndex] = BoxHeightArr[minIndex]+ccontent[i].offsetHeight; 80 } 81 } 82 } 83 //以下開(kāi)始是輔助部分，不一一贅述，上面是實(shí)現(xiàn)的核心，原理已經(jīng)一一道明 84 function getChildElement(parent,content){ 85 var contentArr = []; 86 var allcontent = parent.getElementsByTagName('*'); 87 for(var i=0;i<allcontent.length;i++){ 88 if(allcontent[i].className == content){ 89 contentArr.push(allcontent[i]); 90 } 91 } 92 return contentArr; 93 } 94 95 function getminHeightLocation(BoxHeightArr,minHeight){ 96 for(var i=0;i<BoxHeightArr.length;i++){ 97 if(BoxHeightArr[i] == minHeight){ 98 return i; 99 } 100 } 101 102 } 103 104 </script> 105 </html>

效果展示：

轉(zhuǎn)載于:https://www.cnblogs.com/jiechen/p/5540031.html

總結(jié)

以上是生活随笔為你收集整理的用原生JavaScript实现图片瀑布流的浏览效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。