瀑布流
2017-01-06 本文已影响0人
Victor细节
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
width: 90%;
margin: 20px auto;
}
#box ul{
list-style: none;
float: left;
width: 24%;
margin: 5px;
}
#box ul img{
width: 100%;
margin: 5px;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>
<div id="box">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
<script type="text/javascript">
var $ulArr = $("ul");
function createImg (count) {
for(var i = 0;i < count; i++){
var img = document.createElement("img");
img.src = "img/" + i + ".jpg";
var li = document.createElement("li");
li.appendChild(img);
//假设一个最短的ul
var minHeightUl = $ulArr[0];
for(var j = 0 ; j < $ulArr.length; j++){
if(minHeightUl.offsetHeight > $ulArr[j].offsetHeight){
minHeightUl = $ulA,rr[j];
}
};
minHeightUl.appendChild(li);
};
};
createImg(99);
</script>
</body>
