將兩個引導列合併爲一個並保持順序

Question

我有一個佈局，我希望將圖像保存在兩列中。因爲圖像可以是不同的高度，所以列應該是彼此獨立的。在低分辨率設備中查看時，我希望圖像位於一列中。目前，我已經解決了這樣的：

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
    <a class="thumbnail" href="#"> 
     <img class="img-responsive" src="http://placehold.it/100x150" alt=""> 
    </a> 
    <a class="thumbnail" href="#"> 
     <img class="img-responsive" src="http://placehold.it/100x50" alt=""> 
    </a> 
    <a class="thumbnail" href="#"> 
     <img class="img-responsive" src="http://placehold.it/100x150" alt=""> 
    </a> 
</div> 
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
    <a class="thumbnail" href="#"> 
     <img class="img-responsive" src="http://placehold.it/100x50" alt=""> 
    </a> 
    <a class="thumbnail" href="#"> 
     <img class="img-responsive" src="http://placehold.it/100x150" alt=""> 
    </a> 
    <a class="thumbnail" href="#"> 
     <img class="img-responsive" src="http://placehold.it/100x150" alt=""> 
    </a> 
</div> 

這裏舉例：https://jsfiddle.net/LLd65ehe/

的問題是，我也想動態圖像添加到這些colums。例如，有一個「加載更多圖像」按鈕，它會加載10個以上的圖像。目前，我有一個加載這些圖像的ajax腳本，並將它們逐個添加到高度較低的列中。如果我有兩列並排，所以最新的圖像將始終處於最底部。這個解決方案的問題是，當列在彼此之下時，根據高度，最新的圖像可以在中間的某處加載。

這怎麼解決？或者，也許整個方法是錯誤的有一個更好的方法來實現我試圖做什麼？

Answer 1

我離開我以前的答案，因爲它是因爲它可能是有用的人。 如果其他人認爲以前的答案沒有幫助，請告訴我，我將刪除它。

新答案就是這個。

自舉網格中有一個有趣的屬性，即每一行的第一列（如果沒有清除浮點數（clear：both））傾向於向較小高度的一側移動。 即 如果一行有2列，並且添加了第三列，它將成爲第二行的第一列。第5,7和每個奇數列同樣適用 現在： 1.如果第一列小於第二列，則第三列將自動移動到左側 2. OTOH，如果第二列比第一列短，那麼第三列將自動向右移動。

這會自動處理您的要求，即將新元素添加到較短的一側。此外，由於元素是按自然順序添加的（不使用JavaScript進行移動），所以它們也會以正確的順序（即按時間順序）自動堆疊並且最新的元素位於底部。

到目前爲止，evrything是好的。 現在來了棘手的部分。

請記住，條件1即第一列比第二列短嗎？ 是的，那個。 那麼在這種情況下，列確實移動到正確的一面但是它不會以磚石風格顯示。它出現在網格樣式（OP希望避免）中，即看起來像它，後續列與前面的列是分開的。 有趣的是，條件2中不會發生這種情況。

要解決條件1的這個問題，我們需要在前一列中添加float:right。

所以，不用再說了，這裏是JSFIDDLE和codesnippet相同。

請注意，在resize函數中，我已將寬度硬編碼爲1004以檢查屏幕是大還是小。您可能希望使用更好的方法進行檢測，並根據自舉網格記住斷點。

function getRandomInt(min, max) { 
 
    min = Math.ceil(min); 
 
    max = Math.floor(max); 
 
    return Math.floor(Math.random() * (max - min)) + min; 
 
} 
 

 
var numColumns = 2; 
 

 
jQuery(window).resize(function() { \t 
 
\t //if(window.width >= 992) { 
 
\t if(jQuery('.thumbnail-container').width() >= 1005) { 
 
\t \t for(i = 2; i <= numColumns; i++) { 
 
\t \t \t currElement = jQuery('.thumbnail-container .columns:eq(' + (i-1) + ')'); //index starts at 0 
 
\t \t \t prevElement = jQuery('.thumbnail-container .columns:eq(' + (i-2) + ')'); //index starts at 0 
 
\t \t \t 
 
\t \t \t parentElem = jQuery('.thumbnail-container'); 
 
\t \t \t parentElemLeft = prevElement[0].getBoundingClientRect().left; 
 
\t \t \t parentElemRight = prevElement[0].getBoundingClientRect().right; \t 
 
\t \t \t 
 
\t \t \t currElemBottom = currElement[0].getBoundingClientRect().bottom; 
 
\t \t \t currElemLeft = currElement[0].getBoundingClientRect().left; 
 
\t \t \t prevElemBottom = prevElement[0].getBoundingClientRect().bottom; 
 

 
\t \t \t if((currElemLeft > ((parentElemRight-parentElemLeft)/2)) && currElemBottom > prevElemBottom) { 
 
\t \t \t \t jQuery(currElement).addClass('so-pull-right'); 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
}); 
 

 

 
jQuery('#load-btn').click(function(e){ 
 
\t console.log('clickeddddd'); 
 

 
\t randomNum = getRandomInt(20,200); 
 
\t var imgSize = '100x' + randomNum; 
 
\t 
 
\t currElement = jQuery('.thumbnail-container .columns:eq(' + (numColumns-1) + ')'); //index starts at 0 
 
\t prevElement = jQuery('.thumbnail-container .columns:eq(' + (numColumns-2) + ')'); //index starts at 0 
 
\t 
 
\t parentElem = jQuery('.thumbnail-container'); 
 
\t parentElemLeft = prevElement[0].getBoundingClientRect().left; 
 
\t parentElemRight = prevElement[0].getBoundingClientRect().right; 
 
\t \t \t \t 
 
\t currElemBottom = currElement[0].getBoundingClientRect().bottom; 
 
\t currElemLeft = currElement[0].getBoundingClientRect().left; 
 
\t prevElemBottom = prevElement[0].getBoundingClientRect().bottom; 
 

 
\t if((currElemLeft > ((parentElemRight-parentElemLeft)/2)) && currElemBottom > prevElemBottom) { 
 
\t \t jQuery(currElement).addClass('so-pull-right'); 
 
\t } 
 
\t 
 
\t numColumns++; 
 
\t 
 
\t elemToAdd = '<div class="col-md-6 columns"><p class="text-center"> COLUMN ' + numColumns +'</p>'; 
 
\t elemToAdd += '<a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/' + imgSize + '" alt=""></a>'; 
 
\t elemToAdd += '</div>'; 
 
\t \t 
 
\t jQuery('.thumbnail-container').append(elemToAdd); 
 
\t 
 
\t e.preventDefault(); 
 
\t return false; 
 
});

\t 
 
.button-container { 
 
\t padding: 10px 0; 
 
} 
 
@media (min-width: 992px) { 
 
\t .so-pull-right { 
 
\t \t float: right !important; 
 
\t } 
 
} 
 
.COLUMN_1 img { 
 
\t border:1px solid blue; 
 
} 
 
.COLUMN_2 img { 
 
\t border:1px solid red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="row button-container"> 
 
\t \t <div class="col-md-12 text-center"> 
 
\t \t \t <button id="load-btn" class="btn btn-primary">Load More</button> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="row thumbnail-container"> 
 
\t \t <div class="col-md-6 columns "> 
 
\t \t \t <p class="text-center"> COLUMN 1 </p> 
 
\t \t \t <a class="thumbnail" href="#"> 
 
\t \t \t \t <img class="img-responsive" src="http://placehold.it/100x50" alt=""> 
 
\t \t \t </a> 
 
\t \t </div> 
 
\t \t <div class="col-md-6 columns"> 
 
\t \t \t <p class="text-center"> COLUMN 2 </p> 
 
\t \t \t <a class="thumbnail" href="#"> 
 
\t \t \t \t <img class="img-responsive" src="http://placehold.it/100x150" alt=""> 
 
\t \t \t </a> 
 
\t \t </div> 
 
\t </div>

Answer 2

除了查找列元素的高度，然後決定在哪裏添加新圖像，您可以計算每列中所有元素的總高度，然後決定添加新圖像的位置。

function addImage(image) { 
    var col1 = $('selectable-querystring'), 
     col2 = $('selectable-querystring'), 
     col1height = 0, 
     col2height = 0; 
    $.each(col1.find('img'), function(key, value) { 
     col1height += value.height; 
    }); 
    $.each(col2.find('img'), function(key, value) { 
     col2height += value.height; 
    }); 
    if (col1height >= col2height) { 
     /* append image to col1 */ 
    } 
    else { 
     /* append image to col2 */ 
    } 
} 

Answer 3

編輯得到一個更好地瞭解問題後編輯答案。

您的要求是，最新的縮略圖被添加到的列在垂直堆疊時應該稍後顯示。這可能只是在HTML標記中的另一列後面（除非你想出絕對定位黑客） 爲此，您必須根據哪列添加了最新的縮略圖，不斷交換列的位置。 此外，您需要分別爲第1列和第2列分配左拉和右拉類，以便在水平對齊時它們仍以原始順序出現，即第一列1和第二列

我有爲此添加了一個代碼片段。這裏是相同的JSFIDDLE。

function getRandomInt(min, max) { 
 
    min = Math.ceil(min); 
 
    max = Math.floor(max); 
 
    return Math.floor(Math.random() * (max - min)) + min; 
 
} 
 

 

 

 
jQuery('#load-btn').click(function(e){ 
 
\t randomNum = getRandomInt(1,100); 
 
\t var imgSize = '100x50'; 
 
\t 
 
\t if(randomNum%2 == 0) { 
 
\t \t imgSize = '100x150'; 
 
\t } 
 
\t 
 
\t elemToAdd = '<a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/' + imgSize + '" alt=""></a>'; 
 
\t 
 
\t //Now find out the shorter column 
 
\t height_1 = jQuery('.COLUMN_1').height(); 
 
\t height_2 = jQuery('.COLUMN_2').height(); 
 
\t 
 
\t columnToAddTo = '.COLUMN_1'; 
 
\t 
 
\t if(height_2 < height_1) { 
 
\t \t columnToAddTo = '.COLUMN_2'; 
 
\t } 
 
\t 
 
\t jQuery(columnToAddTo).append(elemToAdd); 
 
\t 
 
\t /*Now the columns have to moved around, so that the column to which 
 
\t the thumbnail was added is at the bottom. This means it has to be 
 
\t AFTER the other columnn in the markup */ 
 
\t 
 
\t jQuery('.thumbnail-container').append(jQuery(columnToAddTo)); 
 
\t 
 
\t 
 
\t e.preventDefault(); 
 
\t return false; 
 
});

.button-container { 
 
\t padding: 10px 0; 
 
} 
 
.COLUMN_1 img { 
 
    border:1px solid blue; 
 
} 
 
.COLUMN_2 img { 
 
    border:1px solid red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="row button-container"> 
 
\t \t <div class="col-md-12 text-center"> 
 
\t \t \t <button id="load-btn" class="btn btn-primary">Load More</button> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="row thumbnail-container"> 
 
\t \t <div class="COLUMN_1 col-lg-6 col-md-6 col-sm-6 col-xs-12 pull-left"> 
 
\t \t \t <p class="text-center"> COLUMN ONE </p> 
 
\t \t \t <a class="thumbnail" href="#"> 
 
\t \t \t \t <img class="img-responsive" src="http://placehold.it/100x50" alt=""> 
 
\t \t \t </a> 
 
\t \t </div> 
 
\t \t <div class="COLUMN_2 col-lg-6 col-md-6 col-sm-6 col-xs-12 pull-right"> 
 
\t \t \t <p class="text-center"> COLUMN TWO </p> 
 
\t \t \t <a class="thumbnail" href="#"> 
 
\t \t \t \t <img class="img-responsive" src="http://placehold.it/100x150" alt=""> 
 
\t \t \t </a> 
 
\t \t \t <a class="thumbnail" href="#"> 
 
\t \t \t \t <img class="img-responsive" src="http://placehold.it/100x150" alt=""> 
 
\t \t \t </a> 
 
\t \t </div> 
 
\t </div>