0

Yii MVC の無限スクロールを使用した製品リストがあります。ユーザーエクスペリエンスを向上させるために2つのレイアウトモードを実装しました

$(".layouts .list").click(function () {
 jQuery(function() {
            var jQuerycontainer = jQuery('.items');
            jQuerycontainer.find('.view ').each(function() {
                jQuery(this).addClass('large');
            });
            jQuerycontainer.isotope({
                layoutMode: 'straightDown',
                itemSelector: '.view',
                straightDown: {
                      columnWidth: 50
                } 
            });
            $(document).ajaxComplete(function() {
                jQuery(".layouts .list").click();
            });
            jQuerycontainer.find('.view').removeClass('small');
            jQuery(this).addClass('large');});
   return false; });


//-----------------Grid Click Function---------------//   
    $(".layouts .grid").click(function () {
        jQuery(function() {
            var jQuerycontainer = jQuery('.items');
            jQuerycontainer.find('.view ').each(function() {
                jQuery(this).addClass('small');
            });
            jQuerycontainer.isotope({ 
                layoutMode: 'masonry',
                itemSelector: '.view',

                masonry: {
                    columnWidth: 50
                }
            });
            $(document).ajaxComplete(function() {
               jQuery(".layouts .grid").click();
            });
            jQuerycontainer.find('.view').removeClass('large');
            jQuery(this).addClass('small');
            jQuerycontainer.isotope('reLayout');

        }); 
 return false;   });
  });`

主な問題は、グリッドに切り替えるとアイテムがグリッド スタイルで表示されることですが、リスト モードに戻すと、リストが正しく表示されますが、リストを再クリックすると、一部のアイテムの後に不均一なスペースが表示されます。それに応じて自動的に再配置されます。

4

1 に答える 1

1

次のようなことを試してください：

$container.isotope({
    masonry {
    columnWidth: 50,
    },
    straightDown: {
    columnWidth: 50,
    }
});


var isMasonry = true;

$('.layouts .grid').click( function() {

    isMasonry= !isMasonry;
    var sizeStyle = isMasonry ?
      { minWidth: '100%', minHeight: '100%' } :
      { minWidth: '100%', height: '100%' };

    $container.addClass('no-transition').css( sizeStyle );
    var redraw = $container[0].offsetHeight;

    $container.removeClass('no-transition')
    .isotope({
        layoutMode: isMasonry ? 'masonry' : 'straightDown'
    });

同位元素間のギャップを避けるには、css トランジションでいくつかのトリックを行う必要があります。

ここで David Desandro によって作成された例を参照してください: http://codepen.io/desandro/pen/ivjAI

于 2013-04-15T23:47:17.717 に答える