定位問題，當像畫廊項目顯示項目

我有一些數據（盒）應顯示像畫廊項目（如在任何購物網站），問題是每個框的高度是不同的，因爲它的內容和每一行4個項目（盒子），比方說，如果其中一個盒子的高度爲300px，其他所有的盒子的高度爲250px，則下一個項目從第一排的最大高度的末端開始，我不想要這樣，我沒有希望這些空的空間，下一行中的每個框應在框中顯示從第一行定位問題，當像畫廊項目顯示項目

這裏是我的代碼

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.flex-container { 
    width: 400px; 
    background-color: lightgrey; 
} 

.flex-item { 
    background-color: cornflowerblue; 
    width: 122px; 
    margin: 0 10px 10px 0; 
    float: left; 
    padding: 15px; 
} 
</style> 
</head> 
<body> 

<div class="flex-container"> 
    <div class="flex-item">flex item 1</div> 
    <div class="flex-item">flex item 2flex item 2flex item 2flex item 2</div> 
    <div class="flex-item">flex item 3</div> 
    <div class="flex-item">flex item 1</div> 
    <div class="flex-item">flex item 2</div> 
    <div class="flex-item">flex item 3</div> 
</div> 

</body> 
</html>

來源

2017-04-12 Muhammad Arslan

你正試圖達到我所知道的磚石效果。做你自己很複雜，但有很好的插件。檢查了這一點：http://masonry.desandro.com/ – kapser

這個鏈接不工作在我身邊:( –

給一些提示我怎麼做，沒有這個插件 –

據我知道你正在尋找的效應被稱爲砌體，或Pinterest的效果。 This is a good plugin for it.

這裏的砌築你的代碼實現：https://jsfiddle.net/jwjkt933/

jQuery代碼用於初始化砌築：

(function($) { 
    $('.flex-container').masonry({ 
    columnWidth: 152, 
    gutter: 10, 
    itemSelector: '.flex-item' 
    }); 
})(jQuery);

這個例子也需要jQuery的，但你也可以用純JS初始化砌築。

來源

2017-04-12 20:09:59 kapser

您需要設置一個最小高度和高度柔性項具體的方式，這種方式儘管內容，你總是會得到整個柔性容器相同大小的箱子，因爲在這裏展示：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
.flex-container { 
 
    width: 400px; 
 
    background-color: lightgrey; 
 
} 
 

 
.flex-item { 
 
    background-color: cornflowerblue; 
 
    width: 122px; 
 
    margin: 0 10px 10px 0; 
 
    float: left; 
 
    padding: 15px; 
 
    height:100%; 
 
    min-height: 75px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="flex-container"> 
 
    <div class="flex-item">flex item 1</div> 
 
    <div class="flex-item">flex item 2flex item 2flex item 2flex item 2</div> 
 
    <div class="flex-item">flex item 3</div> 
 
    <div class="flex-item">flex item 1</div> 
 
    <div class="flex-item">flex item 2</div> 
 
    <div class="flex-item">flex item 3</div> 
 
</div> 
 

 
</body> 
 
</html>

製作一定要注意在上面的例子中使用的最小高度和高度參數

來源

2017-04-12 20:06:49 Midimistro

你可以用flex做，但不能用行。您必須使用flex-direction: column;和align-content屬性。檢查這個小提琴。

https://jsfiddle.net/4evoq3nt/1/

來源

2017-04-12 20:08:10 Varin

嗨，@Varin唯一的問題，我與這是高度，我可以不使用高度，因爲內容是動態的，我不確定高度 –

該解決方案水平增長。繼續添加項目，你會得到一個水平滾動條，而不是一個垂直滾動條，這不符合普通用戶對此佈局的期望。因此，您的解決方案不能回答問題。我懷疑你有沒有使用過這個功能，當有未知的項目流顯示在列中。 'Flexbox'不能用於'masonry' /'pinterest'佈局。考慮CSS列，但是在調整大小或添加更多項目時存在主要內容重排問題。 –

定位問題，當像畫廊項目顯示項目

回答

相關問題