Question

所以我使用angular来返回一组对象。我希望每个对象在dom中用div表示，比如

<div class="container-fluid">
  <div ng-repeat="x in loaders" class="col-sm-2">
    <div style="padding:15px;width:350px;">

        <table>
            <tr>
                <td>
                    <div style="font-size:60pt;">{{x.id}}</div>
                </td>
                <td>
                    <div style="padding-left:30px;font-weight:bold;width:100%;">
                        <div>{{x.loaderCustomHeader}}</div>
                        <div>Type:&nbsp;{{x.loaderType}}</div>
                        <div>Last Run Time:&nbsp;{{x.lastRunTimeFormatted}}</div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
  </div>
<div>

我希望这些div只是简单地在屏幕上渲染，当达到容器div的宽度时，移动到下一行直到它满了。这是使用boostrap执行此操作的理想方法，还是应该使用其他类来实现此效果？我有我想要的东西，但利润已经关闭。

Answer 1

创建定义每个图块布局的CSS类。然后使用像Isotope这样的插件（为了节省编写所有tile重排逻辑的时间） - 并使用JS实例化每个tile并将其附加到Isotope网格。 Isotope将为您处理动态排列 - 只需确保每次动态添加新磁贴时在Isotope上调用更新布局方法。

编辑：这是我构建的一个使用此类实现的工作站点。我们的MVC允许我们动态更改FAQ网格中的问题，并且布局由Isotope处理（向下滚动到FAQ）。欢迎您根据需要查看源代码并从实现中借鉴。

Example Here

需要使用twitter bootstrap创建动态磁贴

1 个答案: