css - 使用 javascript 排序 div

Question

我有这样的事情： 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 像素的空间，然后我想取下更高的块。

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

谢谢！

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

Answer 2

您不能简单地为CSS中的选定元素添加底部边距吗？

#element {
   margin-bottom: 20px;
}

Answer 3

您可以通过在底部 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}

Answer 4

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

停止尝试自己弄清楚，尝试使用CSSTrick 上解释的Masonry或jQueryEqualHeight 。

什么是砌体？

Masonry 是一个 JavaScript 网格布局库。它的工作原理是根据可用的垂直空间将元素放置在最佳位置，有点像石匠在墙上安装石头。您可能已经在整个 Internet 上看到了它的使用情况。

Answer 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);​​​​​​​​​​​​​​​​​
 }