官网
官网
案例
<!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></head><style> * { box-sizing: border-box; } body { font-family: sans-serif; } /* ---- grid ---- */ .grid { background: #DDD; max-width: 1200px; } /* clear fix */ .grid:after { content: ''; display: block; clear: both; } /* ---- .grid-item ---- */ .grid-item { float: left; width: 100px; height: 100px; background: #C09; border: 2px solid hsla(0, 0%, 0%, 0.5); } .grid-item--width2 { width: 200px; } .grid-item--height2 { height: 200px; }</style><body> <div class="grid"> <div class="grid-item"></div> <div class="grid-item "></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item "></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> </div></body><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script><script> // external js: packery.pkgd.js // $('.grid').packery({ // itemSelector: '.grid-item' // });</script></html>效果
最后
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！