Question

我在Yii MVC中有Infinite Scroll的产品清单。我已经实现了两种布局模式来增加用户体验

$(".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;   });
  });`

主要问题是，当我切换到网格时，它会以网格样式显示项目。但是当我切换回列表模式时，它会正确显示列表，但是在某些项目之后有一些不均匀的空格，当我重新点击列表，它会自动重新排列。

Answer 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

Isotope StraightDown布局模式与无限滚动之间的空隙不均匀

1 个答案: