如何使Bootstrap的縮略圖像Pinterest上的縮略圖一樣？

我使用Twitter的引導縮略圖在我的項目，但在每張照片的標題的長度是每次都不同，我希望他們能夠填補所有像Pinterest的這個例子中，空間：如何使Bootstrap的縮略圖像Pinterest上的縮略圖一樣？

http://pinterest.com/all/?category=diy_crafts

如何我可以做到這一點嗎？謝謝。

來源

2013-03-26 Loolooii

我不確定你想要什麼 – 2013-03-26 15:19:03

像這樣？ http://masonry.desandro.com/demos/images.html – 2013-03-26 15:21:59

不能用在這種情況下，Twitter的引導縮略圖實現的，因爲縮略圖的float:left只要你想將無法正常工作。

float:left總是將下一個縮略圖放在佈局中的最後一個浮動元素的下方，並且位於之前的float:left元素的右側。

此圖片將更好地解釋它：

Problems with float:left

這些元素的縮略圖，所述元件數5僅僅是第四元件下和在佈局中留下作爲可能的。第6個元素放在第5個元素下並且儘可能地留下，如果我們放置第7個元素，它將放置在頁面的左側，第一列中和元素6的下方。

http://jsfiddle.net/YsrtS/

所以，如果我們想要一個Pinterest佈局，我們應該使用一些JavaScript或只是使用CSS3的新columns屬性（但您將失去與舊瀏覽器的兼容性）。

簡單的佈局可能是：

<div id="wrapper"> 
    <div id="columns"> 
     <div class="pin"> 
      <img src="..." /> 
      <p> 
       ... 
      </p> 
     </div> 
    ...

和CSS：

#columns { 
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px; 
    -webkit-column-fill: auto; 
    -moz-column-count: 3; 
    -moz-column-gap: 10px; 
    -moz-column-fill: auto; 
    column-count: 3; 
    column-gap: 15px; 
    column-fill: auto; 
} 

.pin { 
    display: inline-block; 
    padding: 15px; 
    padding-bottom: 5px; 
}

Here你有怎樣你可以用這個簡單的佈局做一個例子。（不是我的）

來源

2013-03-26 15:31:29 Pigueiras

我想我會使用Mesonry作爲Miljan的建議，這個屬性是非常好的，雖然如果它支持的Internet Explorer！ – Loolooii 2013-03-26 15:39:38

@Loolooii在IE10中，它沒有前綴=）：http://msdn.microsoft.com/en-us/library/ie/hh673534(v=vs.85).aspx（但你是對的，可能它是更好地使用JavaScript解決方案，因爲它在IE9中不受支持） – Pigueiras 2013-03-26 15:42:42

這是沒有什麼可以完成bootstraps浮動佈局，因爲Miljan建議你需要一個插件。如砌體對齊divs完全對齊彼此。

這裏是沿途的一些幫助的鏈接： http://jaxenter.com/tutorial-get-a-tiled-layout-with-jquery-plugins-43514.html

來源

2013-03-26 15:29:21

卓越，我用bootstrap和正常工作。如果你想改變列數只是改變。另一點是由於一些圖像存在大小不同的盒子，所以一種選擇是將其設置爲固定大小，因此您將擁有一個同類接口。

.pin img { 
    width: 230px; 
    ... 
}

我用230像素到四列大小。

來源

2015-07-13 02:42:31

如何使Bootstrap的縮略圖像Pinterest上的縮略圖一樣？

回答

相關問題