像Pinterest一樣呈現照片

現在，圖片在我的Ruby on Rails應用中呈現爲像這樣。像Pinterest一樣呈現照片

enter image description here

的圖片基於一個表，其每行具有五個單元，並且每個單元已經指定填充如上所示。正如你所看到的，這看起來有些尷尬，我想讓它看起來像下面一樣（來自Pinterest） enter image description here

佈局並不一定完全一樣，但你會看到這一點。我希望每個圖片之間的填充很好地調整。從瀏覽Stackoverflow，我學到了使用Masonry可能是一個完美的解決方案，但我不知道是否有其他選擇，因爲我想盡可能地避免在我的應用程序中使用jQuery。

UPDATE：

<div id="user_posts"> 
    <table> 
    <% @posts.in_groups_of(5).each do |post_array| %> 
     <tr> 
     <% post_array.each do |post| %> 
      <% unless post.blank? %> 
      <td class="user_post_space"><%= link_to image_tag(post.image_url(:thumb), :class => "img-polaroid"), post %></td> 
      <% end %> 
     <% end %> 
     </tr> 
    <% end %> 
    </table> 
</div>

感謝您的幫助提前！

來源

2012-12-28 Maximus S

寶麗一夜暴富之外，你真正需要的是在一個固定的寬度和可變塊高度進行條帶化的內容塊列。你可以在容器上使用'display：table'和'display：table-cell'來做到這一點，六個對象，並使容器'height：100％'。您只需要意識到您在標記中放置條紋的方式，因爲它們將以標記到佈局的方式轉向。 –

您也可能想追蹤每個列的高度，因爲您添加新項目以保持相對平衡。 –

我需要一些澄清。在什麼div我設置'display：table'，並且在哪個容器上設置'height：100％'？如果您需要，我更新了我的代碼。謝謝！ –

我想使用jQuery插件牆面它將使佈局類似Pinterest的

http://masonry.desandro.com/

來源

2012-12-28 05:35:13

我已經意識到這一點，問題是如果有更好的選擇。感謝您的輸入！ –

像Pinterest一樣呈現照片

回答

相關問題