如何在Meteor中进行类似Pinterest的UI布局？(已编辑,有人使用Cast.js吗？)

Question

这里对webdev很新,但是试着去Meteor吧!我想创建一个包含一些文本,链接和图像的集合,并以类似于Pinterest的网格类型布局显示集合中的每个项目.

我已经发现了一些资源,如流星同位素(https://github.com/digioak/meteor-isotope),cast.js(http://blog.benmcmahen.com/post/45711238911/create-beautiful-grid -layouts-with-cast-js)甚至可能使用twitter bootstrap自己的网格系统？

是否有推荐的Meteor网格视图方法？谢谢.

Answer 1

砌体很适合我(这是我的应用程序).只需将其添加到您的项目中.

meteor add sjors:meteor-masonry

为了使渲染工作与图像正确,您还需要添加imagesLoaded库.

meteor add mrt:jquery-imagesloaded

以下是如何在代码中使用它的示例:

result.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>

result.js

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

  $container.imagesLoaded( function(){
    $container.masonry({
      itemSelector : '.result-item'
    });
  });
};