window.Onload= function(){ waterFlow("container", "box"); } function waterFlow(parent, chirld){ var wparent = document.getElementById(parent);//获取父级div, 最外级容器 var allArr = getAllChirld(wparent,chirld);//获取到所有的class为box的容器div var wscreenWidth = document.documentElement.clientWidth;//获取屏幕宽度 var wchirldWidth = wparent.getElementsByTagName("*");//获取所有的标签 var num = Math.floor(wscreenWidth/wchirldWidth[0].offsetWidth);//这是一个Math算法, 目的是将小数转变为整数, // 从而可以知道每行最多容纳几张图片 wparent.style.cssText = "width:"+wchirldWidth[0].offsetWidth*num+"px;margin:0 auto";//固定每行摆放个数 和上下左右边距 //获得每行的最小高度 getMinHeightOfCols(allArr, num); } function getAllChirld(parent,classname){ //获取所有的标签 var wchirld = parent.getElementsByTagName("*"); //创建数组 var chirldArr = []; //遍历wchirld, 将其中className等于classname(传进来的参数)相同的标签放入数组chirldArr中 for(var i = 0; i