响应项目网格

时间:2014-09-06 23:10:30

标签: css angularjs responsive-design

我正在开发一款使用AngularJS的应用。我的应用程序有一组JSON对象。这些对象中的每一个都有图片(缩略图),名称和描述。我想将这些对象中的每一个显示为" tile"在我的UI中。图块将由蓝色矩形组成。矩形内部将是缩略图。右边是标题和描述。如下所示:

+-------------------------------------------------+
| +---------+  [Title Goes Here]                  |
| | Picture |  [Description goes here. It may     |
| |         |   wrap around to multiple lines.    |
| +---------+   Still, this is the idea.]         |
+-------------------------------------------------+

我想将这些瓷砖放在网格中。但是,我也试图以相应的方式做到这一点。我在想我正在努力做一些我无法做到的事情。基本上,我希望每个瓷砖占据可用宽度的25%。如果屏幕低于某个阈值,我希望每个瓷砖占33%,然后50%,最后,如果一个手机,100%。

我看到了Masonry。看起来很好。但是,它似乎没有任何响应能力。然后我看到了FreeWall。这有一定的反应能力。但是,我没有看到AngularJS的支持。有谁知道我该怎么做?我有每个" tile"的HTML。但创建一个响应式网格,当有人对排序/过滤器进行动画时,它会让我失望。动画片就是我想要使用像Masonry或FreeWall这样的东西的原因。然而,我仍然需要响应能力。

谢谢!

0 个答案:

没有答案