jquery - 同位素中心曼索里

Question

有人能帮我把这个同位素合并到中心吗

jQuery.noConflict();
(function($) {
    $(function() {
        var resizeTimer = null;
        jQuery(window).bind('load resize', function() {
            if (resizeTimer) clearTimeout(resizeTimer);
            resizeTimer = setTimeout("tz_init("+"350)", 100);
        });

        var $container = $('#container'),
            $body = $('body'),
            colW = 0,
            columns = null;

        $container.imagesLoaded( function(){
            $container.isotope({
                itemSelector : '.element',
                layoutMode: 'masonry',
                resizable: true,
                masonry: {
                    columnWidth: colW
                }
            });
            tz_init(350);
        });
         jQuery(document).ready(function(){
             jQuery.callFunction("tz_init(358)");
         });
    });
})(jQuery);

//FILTERING
function loadPortfolio(){
    var $optionSets = $('#options .option-set'),
    $optionLinks = $optionSets.find('a');
    $optionLinks.click(function(event){
        event.preventDefault();
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
            return false;
        }
        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');

        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
        key = $optionSet.attr('data-option-key'),
        value = $this.attr('data-option-value');
        // parse 'false' as false boolean

        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
            // changes in layout modes need extra logic
            changeLayoutMode( $this, options )
        } else {
            // otherwise, apply new options
            $container.isotope( options );
        }

        return false;
    });
}

loadPortfolio();

与网站上的那个？

http://isotope.metafizzy.co/custom-layout-modes/centered-masonry.html

我不太擅长 jquery，它给我带来了问题，据我所见，我网站上的同位素在没有 jQuery.noConflict 的情况下不起作用

Answer 1

我用它来居中：

    $.Isotope.prototype._getCenteredMasonryColumns = function() {
    this.width = this.element.width();

    var parentWidth = this.element.parent().width();

                  // i.e. options.masonry && options.masonry.columnWidth
    var colW = this.options.masonry && this.options.masonry.columnWidth ||
                  // or use the size of the first item
                  this.$filteredAtoms.outerWidth(true) ||
                  // if there's no items, use size of container
                  parentWidth;

    var cols = Math.floor( parentWidth / colW );
    cols = Math.max( cols, 1 );

    // i.e. this.masonry.cols = ....
    this.masonry.cols = cols;
    // i.e. this.masonry.columnWidth = ...
    this.masonry.columnWidth = colW;
};

    $.Isotope.prototype._masonryReset = function() {
    // layout-specific props
    this.masonry = {};
    // FIXME shouldn't have to call this again
    this._getCenteredMasonryColumns();
    var i = this.masonry.cols;
    this.masonry.colYs = [];
    while (i--) {
      this.masonry.colYs.push( 0 );
    }
};


    $.Isotope.prototype._masonryResizeChanged = function() {
    var prevColCount = this.masonry.cols;
    // get updated colCount
    this._getCenteredMasonryColumns();
    return ( this.masonry.cols !== prevColCount );
};

    $.Isotope.prototype._masonryGetContainerSize = function() {
    var unusedCols = 0,
        i = this.masonry.cols;
    // count unused columns
    while ( --i ) {
      if ( this.masonry.colYs[i] !== 0 ) {
        break;
      }
      unusedCols++;
    }

    return {
          height : Math.max.apply( Math, this.masonry.colYs ),
          // fit container to columns that have been used;
          width : (this.masonry.cols - unusedCols) * this.masonry.columnWidth
    };
};