1、html代码
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
2、css代码
@media screen and (max-width: 800px) {
body .box{
-moz-column-count: 4;
/* Firefox */
-webkit-column-count: 4;
/* Safari 和 Chrome */
column-count: 4;
}
}
@media screen and (max-width: 500px) {
body .box{
-moz-column-count: 3;
/* Firefox */
-webkit-column-count: 3;
/* Safari 和 Chrome */
column-count: 3;
}
}
.item {
height: 123px;
padding: 1em;
margin-top: 1em;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
border: 1px solid #000;
/* background: #909090; */
}
.item:nth-of-type(1) {
margin-top: 0;
}
.box {
-moz-column-count: 5;
/* Firefox */
-webkit-column-count: 5;
/* Safari 和 Chrome */
column-count: 5;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
3、js代码
<script>
(function (W, D) {
var items = D.querySelectorAll('.item')
items.forEach((v, i) => {
let height = getHeight()
let color = getColor()
console.log(height, color)
v.setAttribute('style', 'height: ' + height + 'px;background:' + color + ';')
})
function getHeight() {
return Math.floor(Math.random() * 200) + 100
}
function getColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
return color;
}
})(window, document)
</script>