``` <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> ```