使用 javascript 排序 div答案

【问题标题】：Ordering divs with javascript使用 javascript 排序 div
【发布时间】：2013-07-18 10:36:51
【问题描述】：

我有这样的事情： http://s9.postimg.org/wwizuwnq7/Untitled_1.png

如果你看到，div（我用绿色标记的地方）有一些像素的空间。我想如果div之间有0-20像素的空间，像这样订购它们： http://s23.postimg.org/ky2htcpt7/image.png

所以，我开始在 javascript 上执行此操作，但我不知道要继续..

var position = new Array();
$(".post").each(function(){
    position[$(this).attr("id")] = $(this).offset().top - $(window).scrollTop();
});

现在我有了所有div的所有位置，现在我需要检查div在哪里有0-20像素的空间，然后我想取下更高的块。

我不确定这是否是好方法，如果现在，我需要另一个想法..

谢谢！

【问题讨论】：

你能给个jsFiddle吗？
它在 php.. 所以我不能这样做......
div under div - dont know how to do this 的可能副本
不，这是另一个问题...

标签： css html position

【解决方案1】：

我设法找到了一个方法！

var position = new Array();
$(".hblocks").each(function(){
    position[$(this).attr("id")] = $(this).offset().top;
});

$.each(position, function(key, value) {
    $.each(position, function(key2, value2) {
        var space = value2 - value;
        if (space <= 20 && space >= -20 && space != 0)
        {
            var finalSpace = Math.max(value, value2);
            var spaceplus = space + 28;
            if (finalSpace != value)
            {
                $("#" + key).css("margin-top",spaceplus + "px");
            }
            else
            {
                $("#" + key2).css("margin-top",spaceplus + "px");
            }
        }
    });
});

【讨论】：

【解决方案2】：

您可以通过在底部 2 个块周围添加一个容器 div 来做到这一点。这样，无论前两个块中的任何一个的高度如何，它们都将始终保持一致。您应该尽量不要使用 javascript 进行样式设置。 CSS 非常强大。

这是一个小提琴：http://jsfiddle.net/kVn7x/

HTML：

<div>
    <div style='height:100px;'></div>
    <div style='height:200px;'></div>
</div>

<div style='clear:left'>
    <div style='height:80px;'></div>
    <div style='height:80px;'></div>
</div>

CSS：

div div{background:red; width:150px; display:inline-block; margin:5px; float:left; clear:none}

【讨论】：

利润是赚取的金额与购买、经营或生产某物所花费的金额之间的差额。什么意思？
对不起，你说得对，我是说空间。但我想要这个，只要空间小于 20px ..
好的，你是指div之间的水平间距还是垂直间距？你确定你控制了这个空间并且它不会改变吗？
vertical，div 需要这样，但我希望在特殊情况下。如果两列中的 div 之间的垂直空间小于 20 px，则放在同一行。所以如果我有这样的事情：s22.postimg.org/esas8qymp/image.png 在我想做的事情之后需要这样做：s24.postimg.org/v4hm6erz9/image.png
但如果空间是 lees 则 20 像素，否则，请参阅顶部 div。（现在就像第一张照片，我想添加功能来做第二张照片中发生的事情）

【解决方案3】：

你不能简单地为 CSS 中的选定元素添加 下边距 吗？

#element {
   margin-bottom: 20px;
}

【讨论】：

【解决方案4】：

您的答案将是一些 javascript+css 编码之王来验证元素的高度 .. 处理它们然后重新排列它们。

不要再自己想办法了，尝试使用 CSSTrick 上解释的 Masonry 或 jQueryEqualHeight。

什么是砌体？

Masonry 是一个 JavaScript 网格布局库。它通过放置基于可用垂直空间的最佳位置的元素，排序就像石匠在墙上装石头一样。你可能已经在在互联网上使用。

【讨论】：

【解决方案5】：

这是未经测试的，但这样的东西应该在你的代码之后工作......

思路是在有问题的div的上边距不断增加1pixel，直到两个div的差为20px

 while(position['div1'] - position['div2'] <20){
     $('#div2').animate({marginTop: '+=1px'}, 0);
 }

如果你想像你的图片一样直接显示它们，那就更容易了：

 var diff = position['div1'] - position['div2']
 if(diff < 20){
     $('#div2').animate({marginTop: '+=' + diff + 'px'}, 0);
 }

【讨论】：