<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body {
background: #000;
}
.wrap-wrap {
position: absolute;
top: 100px;
left: 600px;
width: 700px;
height: 500px;
background-color: wheat;
}
#wrap {
position: absolute;
top: 20px;
left: 30px;
width: 500px;
height: 100px;
background: #fff;
margin: 0 auto;
}
#wrap div {
position: absolute;
}
</style>
</head>
<body>
<div class="wrap-wrap">
<div id="wrap"></div>
</div>
<script src="./jquery3.6.0.js"></script>
<script>
function pubu ($wrap, $items, margin_left, margin_top) {
margin_left = margin_left || 0
margin_top = margin_top || 0
var parent_width = $wrap.width()
var child_width = $items.eq(0).outerWidth()
// 可以放几列
var max_column = Math.floor(parent_width / (child_width + margin_left))
// 每一列的left值
var column_pos = []
for (var i = 0; i < max_column; i++) {
var cur_left = (child_width + margin_left) * i
column_pos.push(cur_left)
}
// 遍历设置位置, 插入DOM
$items.each(function (index, item) {
var $item = $(item)
var $childrens = $wrap.children()
// 第一列的位置顺序插入即可
if ($childrens.length < max_column) {
$item.css({
left: column_pos[index],
top: 0
})
$wrap.append($item)
return
}
// --- 第二列开始要判断高度
// 取出所有列最后一项的高度
var column_heights = []
$childrens.each(function (child_index, child_item) {
var $child_item = $(child_item)
var pos = $child_item.position()
var left = pos.left
var top = pos.top
// 判断是这是哪一列
var column_num = 0
for (var i = 0, len = column_pos.length; i < len; i++) {
if (left == column_pos[i]) {
column_num = i
break
}
}
var pre_height = column_heights[column_num] || 0
var cur_height = top + $child_item.outerHeight()
column_heights[column_num] = Math.max(pre_height, cur_height)
})
// 取出目标位置的left和top, top是column_heights里最小的那一项
var target_top = column_heights[0]
var target_left = column_pos[0]
for (var i = 1, len = column_heights.length; i < len; i++) {
var cur_h = column_heights[i]
if (cur_h < target_top) {
target_top = cur_h
target_left = column_pos[i]
}
}
// 设置位置
$item.css({
top: (target_top + margin_top) + 'px',
left: target_left + 'px'
})
// 追加
$wrap.append($item)
})
}
</script>
<script>
var colors = [
'#374151',
'#B91C1C',
'#B45309',
'#047857',
'#1D4ED8',
'#4338CA',
'#6D28D9',
'#BE185D',
]
function randomNum(minNum,maxNum){
switch(arguments.length){
case 1:
return parseInt(Math.random()*minNum+1,10);
break;
case 2:
return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
break;
default:
return 0;
break;
}
}
var $items = $()
for (var i = 1; i <= 20; i++) {
var $div = $(`<div>${i}</div>`)
var height = randomNum(50, 200) + 'px'
$div.css({
width: '68px',
height: height,
background: colors[randomNum(0, 7)],
color: '#fff',
textAlign: 'center',
lineHeight: height,
border: '1px solid #000'
})
$items = $items.add($div)
}
pubu($('#wrap'), $items, 10, 10)
</script>
</body>
</html>
