Trying to sort out algorithm for JQuery

问题

In an attempt to improve this answer here: How to make divs stack without spaces and retain order on smaller sizes - in Bootstrap

I have been trying to work out how to create a jQuery that will dynamically set the margin-top of divs depending on the accumulated height total in comparison to the height total of the adjacent column of divs.

The 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%;
}
}

The 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",
    });
    }
}
}
});

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

The idea is, that the difference in height is applied as a negative top margin to the shorter div, bringing it up flush under the dive above it.

I am not sure what I'm doing wrong, I suspect it is more than one thing. I've been fiddling around with it (no pun intended) and cannot make it work.

I don't think it's being acted on at all.

I'd appreciate any feedback

I solved this with the accepted answer's help, see full code here:

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

回答1:

Take a look at my way of figuring out a solution for this.

I took a couple of new divs and made the existing divs to hide behind, then appended the divs as per class to right and left of the two divs.

JS fiddle link
The below is my code for adding the existing divs into two new divs

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

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

来源：https://stackoverflow.com/questions/32563154/trying-to-sort-out-algorithm-for-jquery

标签

javascript

jquery

html

css

css-float