瀑布流布局

Qamar ·

更新时间:2024-11-14

· 932 次阅读

window.onload = window.onresize = function(){      onload事件，当页面加载完执行
	var ocont = $("#cont")[0];               获取ID为cont的元素
	var abox = $(".box");                      获取CLASS名为box的元素
	var clientW = document.documentElement.clientWidth || document.body.clientWidth;   获取元素视窗的宽度
	var mNum = Math.floor(clientW/abox[0].offsetWidth);                   获取屏幕同一行可以放下多少张图片
	init();
	function init(){
		//1.让瀑布流的大框自适应
		ocont.style.width = mNum*abox[0].offsetWidth + "px";
		var heightArr = [];
		//2.区分第一行和第二行
		for(var i=0;i<mNum;i++){
			//3.将第一行所有的高度存成数组
			heightArr.push(abox[i].offsetHeight);
			console.log(heightArr);
			abox[i].style.position = ""
			console.log(i);
		}
		//3.遍历第二行所有的元素
		for(var i=mNum;i<abox.length;i++){
			//3.1 取得第一行高度数组中的最小值，用来给第二行的元素设置top

// var minHeight = Math.min.apply(false,heightArr);
var minHeight = getMin(heightArr);

			//3.2 取得最小值的索引，用给第二行的元素设置left
			var minIndex = getMinIndex(heightArr,minHeight);
			abox[i].style.position = "absolute";
			abox[i].style.left = minIndex * abox[0].offsetWidth + "px";
			abox[i].style.top = minHeight + "px";
			//4.改变数组的最小值，将最小值加上后来排过来的元素的高度
			heightArr[minIndex] += abox[i].offsetHeight;
		}	
	}
	function getMin(arr){                          获取最小值
		var newArr = [];
		for(var i=0;i<arr.length;i++){
			newArr.push(arr[i]);
		}
		for(var i=0;i<newArr.length-1;i++){
			for(var j=0;jnewArr[j+1]){
					ls = newArr[j];
					newArr[j] = newArr[j+1];
					newArr[j+1] = ls;
				}
			}
		}
		return newArr[0];
	}
	function getMinIndex(arr,min){
		for(var i=0;i<arr.length;i++){               获取元素的索引
			if(arr[i] == min){
				return i;
			}
		}
	}
	function $(obj){                                  获取元素
        if(obj[0] != "." && obj[0] != "#"){
  	        return document.getElementsByTagName(obj);
        }else{
  	         return document.querySelectorAll(obj);
 }

}
}