7

http://jsfiddle.net/cUcFd/5/を参照してください。layoutModeを「masonry」または「fitRows」に変更すると、正常に機能することに注意してください。しかし、「fitColumns」を使用すると、それは単に空白になり、すべてのブロックが消えます。

fitColumnsモードを機能させるために、コンテナーとアイテムにどのスタイルを設定するかについての要件があるようですが、それらが何であるかについてのドキュメントが見つかりません。

4

2 に答える 2

8

なぜ機能しないのか

fitColumnsは「水平レイアウト」であるため、横スクロールゲームと同様に、上下ではなく横に移動することを目的としています。http://isotope.metafizzy.co/layout-modes.html#horizo​​ntal- layoutsに記載されているように、設計上、水平レイアウトには高さ属性が必要です。

静的ソリューション

コンテナの幅を、いくつもの列が収まるように埋めたいのですが、必要なだけ垂直方向のスペースを占めるようにしたいのです。

masonryの代わりに使用したいfitColumns。を設定するcolumnWidthと、コンテナの幅を埋めて、必要なだけ垂直方向のスペースを使用できるようになります。例： http： //jsfiddle.net/cUcFd/22/

$('#container').isotope({
    itemSelector : '.block',
    // layoutMode: 'fitColumns',
    layoutMode: 'masonry',
    masonry: {
        columnWidth: 100
    }
});

動的ソリューション

列の幅がわからず、動的に検索したい場合は、https#container：//stackoverflow.com/a/8853777/1786459で提供されているコードのようなものを使用して、最も幅の広い要素に基づいて列を作成できます。

例： http： //jsfiddle.net/cUcFd/24/

var column_width = Math.max.apply(null,$('#container .block').map(function(){return $(this).outerWidth(true);}).get());

ただし、列幅を設定する最も適切な方法を決定するのはあなた次第です。

于 2014-02-03T16:14:20.697 に答える
2

コンテナの幅と高さを設定してみてください。を使用する場合はlayoutMode:'fitColumns'、すべての要素に、コンテナを満たさなくなるfloatプロパティを指定する必要があります。

設定することもできますresizesContainer:false

于 2012-06-20T20:47:55.803 に答える