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网格中有一个有趣的属性，每行的第一列，如果没有清除浮动（clear：both），往往会移向较低高度的一侧。即如果一行有2列，并且添加了第三列，则它将是第二行的第一列。同样适用于第5，第7和每个奇数列现在： 1.如果第一列比第二列短，则第3列将自动向左移动 2. OTOH，如果第二列比第一列短，则第三列将自动向右移动。

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

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

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

请记住，条件1，即第1列比第2列短？是的，那个。那么在这种情况下，柱确实移动到正确的一侧但是它不会出现在砖石样式中。它出现在网格样式中（OP希望避免），即看起来像它，后续列与前面的列分开。有趣的是，这不会发生在条件2中。

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

所以没有任何进一步的麻烦，这里有JSFIDDLE和相同的codesnippet。

请注意，在调整大小功能中，我已将宽度硬编码为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

您可以计算每列中所有元素的总高度，然后决定添加新图像的位置，而不是查找列元素的高度，然后决定添加新图像的位置。

<body>

<div id="worked"></div>
<h1 style="text-align: center;"><span style="color: #ff0000;"><strong>Offer Ends In:</strong></span></h1>
<h1 id="time" style="text-align: center;">&nbsp;</h1>

</body>

<script>
var handler = function() {
  if (--sec < 0) {
    sec = 59;
    if (--min < 0) {
      min = 0;
      sec = 0;
    }
  }
  var min1 = "0" + min + "m";
  var min2 = min + "m";
  var sec1 = "0" + sec + "s";
  var sec2 = sec + "s";
var col = ":";
min1.fontcolor("red");
min2.fontcolor("red");
sec1.fontcolor("red");
sec2.fontcolor("red");
col.fontcolor("red");
  document.getElementById("time").innerHTML = (min < 10 ? min1 : min2) + col + (sec < 10 ? sec1 : sec2);
};
var sec = 0;
var min = 15;
handler();
setInterval(handler, 1000);
</script>

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

2 个答案: