填充空白点响应缩略图网格

时间:2015-04-16 06:45:29

标签: html css twitter-bootstrap

我正在使用instagrams API并抓取图片和一些内容并将它们放入缩略图中。这个结果唯一的疼痛是因为内容可能太大而导致一些缩略图被推出

这是一个例子

enter image description here

如何制作一些缩小的缩略图?看起来交错的最终结果对我很好(艺术效果)。这是我的代码。我正在使用把手,因为我正在使用MEAN堆栈

<body align="center">
<h1>
    <p>Hello {{user.username}}!</p>
</h1>
<h2>
    <p>Photos from your feed:</p>
</h2>
 <div class="jumbotron">

 <div class="row">
  {{#each photos}}
<div class="col-sm-6 col-md-4 col-xs-4" style="text-align:center">
 <div class="thumbnail">
    <img src="{{url}}" class="img-responsive" class="img hashtag-img"><br>
        <div class="caption" style="text-align:left">
         <p>    {{caption.text}} </p><br>
        <p>Likes: {{likes.count}}
        <form id="like" role="form" method="post" action="/like">
              <input type="hidden" name="link" value="{{link}}">
              <button type="submit" class="btn btn-primary">Like</button>
        </form>
        <a href="/unlike" class="btn btn-warning" role="button" align="center">Unlike</a>
        </p>
        </div>
      </div>
     </div>
    {{/each}}
   </div>
  </div>
 </body>

1 个答案:

答案 0 :(得分:0)

我认为您应该使用Jquery Grid-A-Licious插件来执行此操作。因为Grid-A-Licious根据宽度和高度自动放置对象。以下是Grid-A-Licious http://suprb.com/apps/gridalicious/的链接,请查看此内容。

例如

    $("#example1").gridalicious({
        width: 50
    });

其中width是缩略图的宽度。