<style>
* {
margin: 0;
padding: 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>
<body>
<div id="box">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
<script>
var ulArr = document.querySelectorAll('ul')
function createImg(count) {
for (var i = 1; i < count; i++) {
//创建图片 和 li
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 = ulArr[j]
}
}
minHeightUl.appendChild(li)
}
}
createImg(16)
</script>
