Question

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

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

随着窗口调整大小，javascript用于调整200到240px之间的网格图块，根据这些图块填充屏幕效果最佳。

冒着重新发明轮子的风险，是否有一个javascript / jquery库已经这样做了？它与砌体/同位素的线条相同，但就我所知，它们并没有调整元素的大小。

如果没有，我想我会自己动手一下，理论上听起来并不太复杂......

Answer 1

所以我已经看了一下这个网站并且不知所措 - 我不知道有哪些插件/库可以实现这种效果。您获得的特定好处或使用jQuery实现此效果的具体要求是什么？如果不是，我会强烈推荐使用媒体查询的css3响应式设计方法。

check out this fiddle for a quick example我能用少量的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中执行类似操作更轻量级，都指的是资源使用强度和工作量。

如果您不熟悉媒体查询 - THIS article on the mozilla developer network is a great starting point

如何根据范围内的窗口大小调整网格图块的大小

1 个答案: