``` <div class="content"> <!-- 產品列表 --> <div id="product" style="position: relative;"> <div class="img-container"> <div class="img-item"> <img src="__MOBILE__/img/蒙版組 14@3x.png" alt=""> </div> <div class="img-item"> <img src="__MOBILE__/img/蒙版組 15@3x.png" alt=""> </div> <div class="img-item"> <img src="__MOBILE__/img/蒙版組 16@3x.png" alt=""> </div> <div class="img-item"> <img src="__MOBILE__/img/蒙版組 17@3x.png" alt=""> </div> <div class="img-item"> <img src="__MOBILE__/img/蒙版組 18@3x.png" alt=""> </div> <div class="img-item"> <img src="__MOBILE__/img/蒙版組 15@3x.png" alt=""> </div> <div class="img-item"> <img src="__MOBILE__/img/蒙版組 16@3x.png" alt=""> </div> </div> </div> </div> <script type="text/javascript"> window.onload=function(){ //獲取主容器的寬度 var content =document.getElementsByClassName('img-container')[0]; var contentWidth=content.offsetWidth;//375 //獲取單個列的寬度(所有列等寬) var columns=content.children; var columnWidth=columns[0].offsetWidth; //console.log(columnWidth);//142=120+(pqdding：10+10)+(border:1+1) //每行可以排列多少個列(著容器寬度/單個等寬列的寬度=取整) var nums=Math.floor(contentWidth/columnWidth); //將下面一排的列插入上面一排高度最低的列下面 // 我們要知道上一行所以列的高度，并取出最低的那一列 var arrHeight=[]; for (var i = 0; i < columns.length; i++) { if (i<nums) { //第一行的元素 arrHeight.push(columns[i].offsetHeight); }else{ //創建第一個和元素的高度和位置的對象 var obj={ minH:arrHeight[0], minI:0,//位置 } //第一個與一排的進行比對，如果一排中有一個小于現有的則替換到現有的 for (var j = 0; j < arrHeight.length; j++) { if (arrHeight[j]<obj.minH) { obj.minH=arrHeight[j]; obj.minI=j; } } columns[i].style.position="absolute"; columns[i].style.left=columns[obj.minI].offsetLeft+"px"; columns[i].style.top=obj.minH+"px"; //插入后這一列的高度就不是最低的啦,obj現有高度=最小高度+當前插入列的高度 arrHeight[obj.minI]=arrHeight[obj.minI]+columns[i].offsetHeight; } } } </script> ```