<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; Var img = document.createElement('img') img. SRC = 'img/' + I + '.jpg' var li = Document.createelement ('li') li.appendChild(img) // Assume a shortest 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>Copy the code