问答详情
源自:2-4 JavaScript实现瀑布流布局中图片排序

代码实现不了。找不到错误,编译可以通过。求帮助。

window.onload = function(){
	waterfull('main','box');
}

function waterfull(parent,box){
	var oParent = document.getElementById(parent);
	var oBox = getByClass(oParent,box);
	var oBoxW = oBox[0].offsetWidth;
	var clos = Math.floor(document. documentElement.clientWidth/oBoxW);
	oParent.style.cssText = 'width:'+oBoxW*clos+'px;margin:0 auto;';

	var hArr = [];//存放每列高度的数组
	for (var i = 0; i < oBox.length; i++) {
		if(i<clos){
			hArr[i] = oBox[i].offsetWidth;//先把高度插进数组 
		}else{
			var minH = Math.min.apply(null,hArr);
			var index = getMinhIndex(hArr,minH);
			oBox[i].style.postion = 'absolute';
			oBox[i].style.top = minH+'px';
			//oBox[i].style.left = index*oBoxW+'px';
			oBox[i].style.left = oBox[index].offsetLeft+'px';
			hArr[index]+=oBox[i].offsetHeight;
		}
	}
}

function getByClass(parent,className){
	var boxArr = [],//用来存储获取到的所有class为box的元素
		oElement = parent.getElementsByTagName('*');
	for (var i = 0; i < oElement.length; i++) {
		if(oElement[i].className == className){
			boxArr.push(oElement[i]);
		}
	};
	return boxArr;
}

function getMinhIndex(arr,val){
	for(var i in arr){
		if(arr[i] == val){
			return i;
		}
	}
}


提问者:苍白的尾巴 2016-07-17 12:22

个回答

  • qq_隔壁龙叔叔_0
    2016-07-17 18:24:43
    已采纳

    function getByClass(parent,className){

        var boxArr = [],//用来存储获取到的所有class为box的元素

        oElement = parent.getElementsByTagName('*');

        for (var i = 0; i < oElement.length; i++) {

            if(oElement[i].className == className){

                boxArr.push(oElement[i]);

            }

        };

        return boxArr;

    }

    上面第三行中加粗地方   你的parent不能直接这么用,它实际上是一个id的值    应该先获取id为parent的dom元素进行操作,

    第三行代码改为  oElement = document.getElementById("parent").getElementsByTagName("*");试试看是不是这个原因