js纯原生手写瀑布流

Html

Css

 * {
	margin:0;
	padding:0;
}
#main {
	position:relative;
	height:auto;
	margin:0 auto;
}
.box {
	padding:10px 0 0 10px;
	float:left;
	/*height:auto;
	*/
}
.pic {
	padding:10px;
	border-radius:5px;
	border:1px solid #ccc;
	box-shadow:0 0 3px #ccc;
	/*height:auto;
	*/
}
.pic img {
	width:200px;
	height:auto;
}

window.onload = function() {
     water();

}

function water() {
     //        获取一下大盒子
     var main = document.getElementById("main");
     //        获取每个小盒子，因为有兼容，所以写个函数，函数在下面
     var boxs = getByClass(main, "box");
     //        获取屏幕宽，也有兼容
     var clientW = document.body.clientWidth || document.documentElement.clientWidth;
     //        获取每个小盒子的宽，因为宽度都一样，获取第一个的就行
     var boxW = boxs[0].offsetWidth;
     //        算一下得几列就好，因为可能算出小数，所以向下取整
     var cols = Math.floor(clientW / boxW);
     //        给大盒子设置宽度
     main.style.width = cols * boxW + 'px';

//        来一个数组，这个数组里面存放前6个盒子的高度
     var hArr = [];
     for (var i = 0; i < boxs.length; i++) {
         if (i < cols) {
             //                存放前六个高度
             hArr.push(boxs[i].offsetHeight);
         } else {
             //                因为第七个要给前六个最短小的哪个下面放，所以要获取一下前六的最小高度
             var minH = Math.min.apply(null, hArr);
             //                获取这个最小的高度属于前六个的第几个
             var minIndex = getIndex(minH, hArr);
             //                给第七个设置位置
             boxs[i].style.position = "absolute";
             boxs[i].style.top = minH + 'px';
             boxs[i].style.left = boxW * minIndex + 'px';
             //                因为第八个和第七个一样，所以把哪个高度更新一下
             hArr[minIndex] += boxs[i].offsetHeight;
         }
     }
 }

function getIndex(val, arr) {
     for (var i = 0; i < arr.length; i++) {
         if (arr[i] == val) {
             return i;
         }
     }
 }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js纯原生手写瀑布流



代码描述：js纯原生手写瀑布流

1

最新

发表评论全部评论

暂时没有评论！

奔跑的小七0

2017/7/20 17:36:47

好
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

奔跑的小七

相关代码

js纯原生手写瀑布流

最新