试图整理JQuery的算法 [英] Trying to sort out algorithm for JQuery

问题描述

为了尝试改进此答案，请访问：

这个想法是，高度差作为负的上边距应用于较短的div，使其在上方的潜水中闪烁。

我不确定我是什么做错了，我怀疑这是不止一件事。我一直在玩弄它（没有双关语），不能使它工作。

我不认为它是在行动。

我将感谢任何反馈

---

已接受的答案帮助，请参阅此处的完整代码：

http：// stackoverflow.com/a/32553919/3956566

解决方案

看看我的解决方案这个。

我使用了几个新的div，并使现有的div隐藏在后面，然后将divs作为每个类添加到两个div的左右。 / p>

JS小提琴连结


以下是我将现有div添加到两个新div中的代码

  $（'＃div1'）。css（float，left）; 
 $（'＃div2'）。css（float，right）; 
 
 $（'＃div1'）。append（$（'。left'））; 
 $（'＃div2'）。append（$（'。right'））; 
  

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:

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

解决方案

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'));

这篇关于试图整理JQuery的算法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！