3

シンプルな石積みのレイアウトがあります。また、クリック時に要素のサイズと位置を変更する必要があります。

ここに jsfiddle があります: http://jsfiddle.net/664cV/12/とコード:

JS

$(function(){
    $('#container').isotope({
        itemSelector: '.box'
    });

    $('.box').click(function(){
        $('.box').width(100).height(100);
        $(this).width(300).height(300);

        $('#container').isotope('reLayout');
    });
});​

CSS

#container {
    width: 400px;
}

.box {
    font-size: 28px;
    width: 100px;
    height: 100px;
}

/* omitted color classes */

HTML

<div id="container">
    <div class="box red">1</div>
    <div class="box blue">2</div>
    <div class="box green">3</div>
    <div class="box yellow">4</div>
    <div class="box black">5</div>
</div>​

問題は、要素番号1と番号3で正しく機能していないことです(画像を参照) 。

要素1がクリックされました（解決済み：回答を参照）

エラー 1

要素 3 がクリックされました

エラー 2

私は何を間違っていますか？

4

3 に答える 3

3

石積みの最初のアイテムの幅を設定して、サイズを変更すると、グリッドの一貫性を維持する新しい最初のアイテムの幅ではなく、アイソトープがこの設定を記憶するようにする必要があります。

残念ながら、アイテム番号3はまだ空きスペースを残していますが、4番目のアイテムを最初の空き行（この場合は行番号1）に配置するため、これがアイソトープの標準的な動作だと思います。

masonry: {
    columnWidth: 100
}

実際、ボックス番号7をクリックすると、空のスペースも残ります。そのデフォルトの動作の解決策を見つけるのもいいでしょう。

<div class="box red">6</div>
<div class="box blue">7</div>
<div class="box green">8</div>
<div class="box yellow">9</div>
<div class="box black">10</div>
于 2012-10-19T13:25:50.317 に答える
0

石工と同位体は列のみを最大化します。wookmark jquery プラグインから説明を見つけることができます。列と行を最大化したい場合は、何か他のものが必要です。

  1. http://www.quora.com/Pinterest/What-technology-is-used-to-generate-pinterest-coms-absolute-div-stacking-layout
  2. http://www.benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/
于 2012-10-19T14:20:07.263 に答える