1

对 webdev 来说非常新，但是在 Meteor 上试试我的手！我想创建一个包含一些文本、链接和图像的集合，并以类似于 Pinterest 的网格类型布局显示集合中的每个项目。

我找到了一些资源，例如 Meteor-isotope ( https://github.com/digioak/meteor-isotope )、cast.js ( http://blog.benmcmahen.com/post/45711238911/create-beautiful-grid -layouts-with-cast-js）甚至可能使用 twitter bootstrap 自己的网格系统？

是否有推荐的使用 Meteor 的网格视图方法？谢谢你。

4

3 回答 3

5

砌体对我来说很好用（这是我的应用程序）。只需将其添加到您的项目中。

meteor add sjors:meteor-masonry

为了使图像正确渲染，您还需要添加imagesLoaded库。

meteor add mrt:jquery-imagesloaded

这是有关如何在代码中使用它的示例：

结果.html

<template name="resultPage">
  <div id="result-container">
    {{#each posts}}
      {{> post}}
    {{/each}}
  </div>
</template>

<template name="post">
  <div class="result-item">
    <a href="{{url}}" target="_blank">
      <img src="{{url}}">
    </a>
    <div class="author">
      Submitted by: <strong>{{author}}</strong>
    </div>
  </div>
</template>

结果.js

Template.resultPage.rendered = function() {
  var $container = $('#result-container');

  $container.imagesLoaded( function(){
    $container.masonry({
      itemSelector : '.result-item'
    });
  });
};
于 2014-12-15T02:48:11.940 回答
1

我找到了这个示例项目并最终从中学习。我不确定它是否对其他人有帮助，但这是项目：http: //isotest.meteor.com/

于 2013-06-13T05:41:49.410 回答
0

我自己带了同位素，但不是流星包。我最终不得不使用库本身，然后使用 jquery ImagesLoaded 进行同位素重新布局调用。流星模板..渲染作品的方式不会影响图像或其他东西，所以我的“块”会不时地间歇性重叠。我停止了网站的开发，但您可以在www.mmohype.com上查看我是如何进行的。点击任何游戏。

于 2013-06-12T20:37:37.277 回答