1

私はこのようなものを持っています: 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 ピクセルのスペースがある場所を確認する必要があります。次に、より高いブロックを削除したいと考えています。

これが良い方法かどうかはわかりません。もし今なら、別のアイデアが必要です..

ありがとう！

4

5 に答える 5

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");
            }
        }
    });
});
于 2013-07-18T15:28:39.850 に答える
0

これはテストされていませんが、コードの後に​​このようなものが機能するはずです...

アイデアは、2 つの div の差が 20px になるまで、問題のある div の上マージンに 1 ピクセルを継続的に追加することです。

 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);​​​​​​​​​​​​​​​​​
 }
于 2013-07-18T15:07:30.973 に答える
0

これを行うには、下の 2 つのブロックの周りにコンテナー div を追加します。そうすれば、上の 2 つのブロックの高さに関係なく、常に一列に並んでいます。スタイリングに 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}
于 2013-07-18T12:47:31.630 に答える
0

Your answer would be some king of javascript+css coding to verify height of elements .. work on em then re-arrange them.

自分で調べようとするのはやめて、CSSTrick で説明されている Masonry または jQueryEqualHeight を使用してみてください 。

メーソンリーとは？

Masonry は、JavaScript グリッド レイアウト ライブラリです。利用可能な垂直方向のスペースに基づいて要素を最適な位置に配置することで機能します。これは、壁に石をはめ込む石工のようなものです。おそらく、インターネット全体で使用されているのを見たことがあるでしょう。

于 2013-07-18T12:56:39.560 に答える