javascript - 将两个 Bootstrap 列合并为一个并保持顺序

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/

问题是我还想将图像动态添加到这些列中。例如，有一个“加载更多图像”按钮，它会加载 10 个以上的图像。目前我有一个 ajax 脚本加载这些图像并将它们一张一张地添加到高度较小的列中。如果我有两列并排，则此方法效果很好，因此最新图像将始终位于底部。此解决方案的问题在于，当列彼此重叠时，根据高度，最新图像可以加载到中间的某个位置。

如何解决？或者也许整个方法是错误的，有更好的方法来实现我想要做的事情吗？

Answer 1

我将保留我之前的回答，因为它可能对某些人有用。如果其他人觉得以前的答案没有帮助，请告诉我，我会删除它。

新的答案是这个。

bootstrap 网格中有一个有趣的属性，即每一行的第一列，如果不清除 float (clear:both)，倾向于向高度较小的一侧移动。IE。如果一行有 2 列，并且添加了第三列，它将是第二行的第一列。同样适用于第 5、7 和每个奇数列现在:1.如果第一列比第二列短，那么第三列会自动向左移动2. OTOH，如果第二列比第一列短，那么第三列会自动向右移动。

这会自动处理您的要求，将新元素添加到较短的一侧。

此外，由于元素是按自然顺序添加的(无需使用 JavaScript 来回移动)，它们还会自动以正确的顺序(即按时间顺序)垂直堆叠，最新的元素位于底部。

到目前为止，一切都很好。现在是棘手的部分。

还记得条件 1，即第一列比第二列短吗？是的，那个。那么在这种情况下，该列确实移动到正确的一侧但是它没有出现在砌体样式中。它出现在网格样式中(OP 希望避免这种样式)，即看起来像它，并且后​​续列与前面的列分开。有趣的是，这不会发生在条件 2 中。

要针对条件 1 解决此问题，我们需要将 float:right 添加到上一列。

因此，事不宜迟，这里是 JSFIDDLE以及相同的代码片段。

请注意，在调整大小函数中，我将宽度硬编码为 1004 以检查屏幕是大还是小。您可能希望使用更好的检测方法，并根据 Bootstrap 网格牢记断点。

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

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


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

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

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

	
.button-container {
	padding: 10px 0;
}
@media (min-width: 992px) {
	.so-pull-right {
		float: right !important;
	}
}
.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">
		<div class="col-md-12 text-center">
			<button id="load-btn" class="btn btn-primary">Load More</button>
		</div>
	</div>
	<div class="row thumbnail-container">
		<div class="col-md-6 columns ">
			<p class="text-center"> COLUMN 1 </p>
			<a class="thumbnail" href="#">
				<img class="img-responsive" src="http://placehold.it/100x50" alt="">
			</a>
		</div>
		<div class="col-md-6 columns">
			<p class="text-center"> COLUMN 2 </p>
			<a class="thumbnail" href="#">
				<img class="img-responsive" src="http://placehold.it/100x150" alt="">
			</a>
		</div>
	</div>