将两个引导列合并为一个并保持顺序

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>