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

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

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

新的答案是这个。

引导网格中有一个有趣的属性，即每行的第一列，如果没有清除浮动（清除：两者），往往会向高度较小的一侧移动。 IE。 如果一行有 2 列，并且添加了第三列，它将是第二行的第一列。第 5、7 和每个奇数列也是如此 现在： 1.如果第一列比第二列短，那么第三列会自动向左移动 2. OTOH，如果第二列比第一列短，那么第三列会自动向右移动。

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

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

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

还记得条件 1，即第一列比第二列短吗？ 是的，那个。 好吧，在这种情况下，柱子确实移到了正确的一侧但它没有以砖石风格出现。它以网格样式出现（OP 希望避免），即看起来像它，并且后​​续列与前面的列分开。 有趣的是，这在条件 2 中不会发生。

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

所以事不宜迟，这里是JSFIDDLE 和相同的代码n-p。

请注意，在 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() {	
	//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>

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 列分配 pull-left 和 pull-right 类，以便在水平对齐时它们仍然以原始顺序显示，即第 1 列然后第 2 列

我为此添加了一个代码 sn-p。这是相同的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){
	randomNum = getRandomInt(1,100);
	var imgSize = '100x50';
	
	if(randomNum%2 == 0) {
		imgSize = '100x150';
	}
	
	elemToAdd = '<a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/' + imgSize + '" alt=""></a>';
	
	//Now find out the shorter column 
	height_1 = jQuery('.COLUMN_1').height();
	height_2 = jQuery('.COLUMN_2').height();
	
	columnToAddTo = '.COLUMN_1';
	
	if(height_2 < height_1) {
		columnToAddTo = '.COLUMN_2';
	}
	
	jQuery(columnToAddTo).append(elemToAdd);
	
	/*Now the columns have to moved around, so that the column to which 
	the thumbnail was added is at the bottom. This means it has to be 
	AFTER the other columnn in the markup */
	
	jQuery('.thumbnail-container').append(jQuery(columnToAddTo));
	
	
	e.preventDefault();
	return false;
});

.button-container {
	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">
		<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="COLUMN_1 col-lg-6 col-md-6 col-sm-6 col-xs-12 pull-left">
			<p class="text-center"> COLUMN ONE </p>
			<a class="thumbnail" href="#">
				<img class="img-responsive" src="http://placehold.it/100x50" alt="">
			</a>
		</div>
		<div class="COLUMN_2 col-lg-6 col-md-6 col-sm-6 col-xs-12 pull-right">
			<p class="text-center"> COLUMN TWO </p>
			<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>
	</div>