DynamicGrid响应式动态布局
DynamicGrid 的动态列表布局，适合做商品展示、图文排列、后台面板这类需要灵活排布的页面。响应式表现挺不错的，列宽会根据屏幕自适应调整，不用你手动去计算。用法也不复杂，布局部分主要靠 CSS 的flex加上一点 JavaScript 逻辑。
比较适合你用在那些图片列表、卡片类内容里，比如商城产品、博客封面、作品集页面等。用class="grid-item"统一包裹每一项，让容器设成display: flex; flex-wrap: wrap;，基本就成型了。动画加载也还挺顺，没啥顿感。
想要玩得更花点，也可以搭配 jQuery 来控制显示隐藏，或者加点 Bootstrap 的组件来做响应式布局更精细点。对布局排版有要求的你，可以顺手看看这些文章：响应式布局、响应式网页布局，都挺实用的。
有个小提醒，图片尺寸尽量统一，不然在低分辨率下排版会有点跳。对了，如果你是从阿里百秀项目转过来的，可以对比下两者的布局逻辑，还蛮有意思的。
如果你正好在搭个展示类页面，不妨试试 DynamicGrid，省事又顺手。
文件大小：13.57KB
评论区