javascript - 试图整理出 JQuery 的算法

Question

试图在此处改进此答案:How to make divs stack without spaces and retain order on smaller sizes - in Bootstrap

我一直在努力弄清楚如何创建一个 jQuery，它将动态设置 div 的 margin-top，具体取决于与 div 的相邻列的总高度相比的累积高度总数.

CSS:

div {outline:solid 1px red; }
// Set media container widths small to test code.
@media (min-width: 400px) {
.container {
    max-width: 1170px;
}
   .left {
    max-width:50%;
    width: 50%;
    float:left;
    clear:left;
} 
   .right {
    max-width:50%;
    width: 50%;
    float:left;
}  
}

@media (min-width: 150px) {
.container {
    max-width: 400px;
}
.col-sm-12 {
    width: 100%;
}
}   

HTML:

<div id="1" class="left col-sm-12" style="height:100px;background-color:yellow;">DIV 1</div>
<div id="2" class="right col-sm-12" style="height:80px;">DIV 2</div>
<div id="3"  class="left col-sm-12" style="height:50px;background-color:yellow;">DIV 3</div>
<div id="4" class="right col-sm-12" style="height:70px;">DIV 4</div>
<div id="5" class="left col-sm-12" style="height:20px;background-color:yellow;">DIV 5</div>
<div id="6" class="right col-sm-12" style="height:80px;">DIV 6</div>
<div id="7" class="left col-sm-12" style="height:50px;background-color:yellow;">DIV 7</div>
<div id="8" class="right col-sm-12" style="height:90px;">DIV 8</div>

Js:

$(function () {
// Get div by id.
var idR = $("div").attr('id');
var idNumder =parseInt(idR);
// check if it's a right div.
if((idNumber % 2 ==0) && (idNumber > 2)){

var className = $("div").attr('class');
var leftHeight = 0;
var rightHeight = 0;

for(int i =0; i<idNumber; i++){
// count up left side heights.
if(className.localeCompare("left")==0){
   leftHeight += $("#"+idNumber.ToString()).height;
}
 // count up right side heights.
 if(className.localeCompare("right")==0){
    rightHeight += $("#"+idNumber.ToString()).height;
}

   var diff = leftHeight - rightHeight;
   // Determine which side is shorter.
   if(leftHeight > rightHeight){
        $("#idR").css({
        "margin-top":"-"+ diff + "px",
    });
   }
    else{
        var idL = (idNumber + 1).toString();
       $("#idL").css({
        "margin-top":"-"+ diff + "px",
        "clear":"both",
    });
    }
}
}
});

fiddle :http://jsfiddle.net/kermit77/hswxc06w/26/

想法是，将高度差作为负上边距应用到较短的 div，使其在其上方的俯冲下方齐平。

我不确定我做错了什么，我怀疑这不止一件事。我一直在摆弄它(没有双关语意)，但无法让它发挥作用。

我认为根本没有采取任何行动。

如果有任何反馈，我将不胜感激

---

我在接受的答案的帮助下解决了这个问题，请在此处查看完整代码:

https://stackoverflow.com/a/32553919/3956566

Answer 1

看看我为此找出解决方案的方法。

我采用了几个新的 div 并将现有的 div 隐藏在后面，然后将每个类的 div 附加到两个 div 的右侧和左侧。

JS fiddle link
下面是我将现有的 div 添加到两个新的 div 中的代码

$('#div1').css("float", "left");
$('#div2').css("float", "right");

$('#div1').append($('.left'));
$('#div2').append($('.right'));