2

石工プラグインを初期化しました - 正常に動作します。

メディア幅 <= 767px で破棄するよりも - 破棄されました

しかし、メディア幅> 767pxに戻って石積みを再度初期化すると、機能しません。

なぜ？

または、石積みプラグインをオフにして、後で何らかのイベントでオンにする別の解決策はありますか?

これは私のコードです:

var masonryData = {
    isInitLayout: true,
    isResizeBound: false,
    itemSelector: '.item',
    columnWidth: 300,
    gutter: 20,
    transitionDuration: '0.5s'
};

function initializeMasonry(masonryData){
    if (jQuery().masonry) {
        var masonryContainer = jQuery('.masonry').masonry(masonryData);
        jQuery(masonryContainer).imagesLoaded(function(){
            jQuery(masonryContainer).masonry(masonryData);
        });
    }
}

function destroyMasonry(){
    if (jQuery().masonry) {
        jQuery('.masonry').masonry();
        jQuery('.masonry').masonry('destroy');
    }
}

私は inquire プラグインを使用しているので、js メディア クエリに match/unmatch メソッドを使用します。

$.Site.Match.smallScreen = function() {
   ...
   destroyMasonry();
   ...
}

$.Site.Match.mediumScreen = function() {
   ...
   initializeMasonry(masonryData);
   ...
}

助けてくれてありがとう

4

4 に答える 4

-1 
$(document).ready(function() {

if ($(window).width() <= 767) {

    $('#container').masonry( 'destroy' );

} 

if ($(window).width() > 768) {

    $('#container').masonry({
      columnWidth: 350,
      gutter: 20,
    });

} 

if ($(window).width() > 992) {

    $('#container').masonry({
      columnWidth: 300,
      gutter: 20,
    });

} 


if ($(window).width() > 1200) {

    $('#container').masonry({
      columnWidth: 270,
      gutter: 20,
    });

}

});

于 2013-09-20T11:09:25.763 に答える