4

本质上，我试图弄清楚如何在此页面上复制效果

https://music.twitter.com/i/chart/popular

当窗口调整大小时，javascript 用于调整网格图块的大小，从 200 到 240 像素，根据哪个最适合屏幕填充。

冒着重新发明轮子的风险，是否有一个 javascript / jquery 库已经这样做了？它与砖石/同位素的路线相同，但据我所知，它们不会调整元素的大小。

如果没有，我想我自己试试看，理论上听起来并不复杂......

4

1 回答 1

2

因此，我查看了该站点并突然想到了-我不知道有任何插件/库可以专门实现该效果。使用 jQuery 实现此效果是否有您获得的特殊好处或特定要求？如果不是，我强烈推荐使用媒体查询的 css3 响应式设计方法。

看看这个小提琴，我可以用少量的 html 和 css 做

.icon {
    background:#ccc;
    float:left;
}

.icon img {
    width:100%;
    height:auto;
}

@media screen and (min-width:960px)  {
    .icon{
        width:20%;
    }
}

@media screen and (min-width:768px) and (max-width:959px) {
    .icon{
        width:25%;
    }
}

@media screen and (min-width:480px) and (max-width:767px) {
    .icon{
        width:33.3%;
    }
}

@media screen and (max-width:479px) {
    .icon{
        width:50%;
    }
}

根据我对与您类似的问题的具体经验，媒体查询结果比在 javascript 中执行类似操作更轻量级，两者都指资源使用的强度和工作量。

如果您不熟悉媒体查询 - Mozilla 开发者网络上的这篇文章是一个很好的起点

于 2013-06-10T20:11:29.700 回答