2

我正在使用 wookmark jquery 插件，它适用于除 safari 之外的所有浏览器，无论是在 PC 还是 Mac 上，图像似乎相互重叠。我该如何解决？

提前感谢亚历克斯

这是插件的代码：

$.fn.wookmark = function(options) {

  if(!this.wookmarkOptions) {
    this.wookmarkOptions = $.extend( {
        container: $('body'),
        offset: 2,
        autoResize: false,
        itemWidth: $(this[0]).outerWidth(),
        resizeDelay: 50
      }, options);
  } else if(options) {
    this.wookmarkOptions = $.extend(this.wookmarkOptions, options);
  }

  // Layout variables.
  if(!this.wookmarkColumns) {
    this.wookmarkColumns = null;
    this.wookmarkContainerWidth = null;
  }

  // Main layout function.
  this.wookmarkLayout = function() {
    // Calculate basic layout parameters.
    var columnWidth = this.wookmarkOptions.itemWidth + this.wookmarkOptions.offset;
    var containerWidth = this.wookmarkOptions.container.width();
    var columns = Math.floor((containerWidth+this.wookmarkOptions.offset)/columnWidth);
    var offset = Math.round((containerWidth - (columns*columnWidth-this.wookmarkOptions.offset))/2);

    // If container and column count hasn't changed, we can only update the columns.
    var bottom = 0;
    if(this.wookmarkColumns != null && this.wookmarkColumns.length == columns) {
      bottom = this.wookmarkLayoutColumns(columnWidth, offset);
    } else {
      bottom = this.wookmarkLayoutFull(columnWidth, columns, offset);
    }

    // Set container height to height of the grid.
    this.wookmarkOptions.container.css('height', bottom+'px');
  };

  /**
   * Perform a full layout update.
   */
  this.wookmarkLayoutFull = function(columnWidth, columns, offset) {
    // Prepare Array to store height of columns.
    var heights = [];
    while(heights.length < columns) {
      heights.push(0);
    }

    // Store column data.
    this.wookmarkColumns = [];
    while(this.wookmarkColumns.length < columns) {
      this.wookmarkColumns.push([]);
    }

    // Loop over items.
    var item, top, left, i=0, k=0, length=this.length, shortest=null, shortestIndex=null, bottom = 0;
    for(; i<length; i++ ) {
      item = $(this[i]);

      // Find the shortest column.
      shortest = null;
      shortestIndex = 0;
      for(k=0; k<columns; k++) {
        if(shortest == null || heights[k] < shortest) {
          shortest = heights[k];
          shortestIndex = k;
        }
      }

      // Postion the item.
      item.css({
        position: 'absolute',
        top: shortest+'px',
        left: (shortestIndex*columnWidth + offset)+'px'
      });

      // Update column height.
      heights[shortestIndex] = shortest + item.outerHeight() + this.wookmarkOptions.offset;
      bottom = Math.max(bottom, heights[shortestIndex]);

      this.wookmarkColumns[shortestIndex].push(item);
    }

    return bottom;
  };

  /**
   * This layout function only updates the vertical position of the 
   * existing column assignments.
   */
  this.wookmarkLayoutColumns = function(columnWidth, offset) {
    var heights = [];
    while(heights.length < this.wookmarkColumns.length) {
      heights.push(0);
    }

    var i=0, length = this.wookmarkColumns.length, column;
    var k=0, kLength, item;
    var bottom = 0;
    for(; i<length; i++) {
      column = this.wookmarkColumns[i];
      kLength = column.length;
      for(k=0; k<kLength; k++) {
        item = column[k];
        item.css({
          left: (i*columnWidth + offset)+'px',
          top: heights[i]+'px'
        });
        heights[i] += item.outerHeight() + this.wookmarkOptions.offset;

        bottom = Math.max(bottom, heights[i]);
      }
    }

    return bottom;
  };

  // Listen to resize event if requested.
  this.wookmarkResizeTimer = null;
  if(!this.wookmarkResizeMethod) {
    this.wookmarkResizeMethod = null;
  }
  if(this.wookmarkOptions.autoResize) {
    // This timer ensures that layout is not continuously called as window is being dragged.
    this.wookmarkOnResize = function(event) {
      if(this.wookmarkResizeTimer) {
        clearTimeout(this.wookmarkResizeTimer);
      }
      this.wookmarkResizeTimer = setTimeout($.proxy(this.wookmarkLayout, this), this.wookmarkOptions.resizeDelay)
    };

    // Bind event listener.
    if(!this.wookmarkResizeMethod) {
      this.wookmarkResizeMethod = $.proxy(this.wookmarkOnResize, this);
    }
    $(window).resize(this.wookmarkResizeMethod);
  };

  /**
   * Clear event listeners and time outs.
   */
  this.wookmarkClear = function() {
    if(this.wookmarkResizeTimer) {
      clearTimeout(this.wookmarkResizeTimer);
      this.wookmarkResizeTimer = null;
    }
    if(this.wookmarkResizeMethod) {
      $(window).unbind('resize', this.wookmarkResizeMethod);
    }
  };

  // Apply layout
  this.wookmarkLayout();

  // Display items (if hidden).
  this.show();
};
4

3 回答 3

4

这里迟到了，但对于未来有问题的开发人员，这可以帮助你....

如果图像加载缓慢，可能会导致 Wookmark 在元素大小方面出现问题。解决这个问题的一种简单方法是像上面提到的 byroncorrales 那样重新调用处理程序。但是，这样做并不能确保所有内容都已加载。我们希望等待 DOM 完全加载，然后再次调用处理程序。

所以最后添加这个简单的 jQuery。

$(window).load(function() {
    handler.wookmark(options);
});
于 2013-08-07T22:20:25.467 回答
3

尝试调用 handler.wookmark 两次

 $(document).ready(function() {
    var options = {
      autoResize: true, // This will auto-update the layout when the browser window is resized.
      container: $('#tiles'), // Optional, used for some extra CSS styling
      offset: 10, // Optional, the distance between grid items
      flexibleWidth: 210 // Optional, the maximum width of a grid item
    };
    var handler = $('#tiles li');
    $('#tiles').imagesLoaded(function() {
      // Prepare layout options.
      // Get a reference to your grid items.
      // Call the layout function.
      handler.wookmark(options);
    });
    handler.wookmark(options);
});
于 2013-04-22T22:27:43.183 回答
0

或者稍后再刷新 - 只有这样它才对我有用（我正在加载图像和视频）

$(window).load(function() {
  setTimeout(function() {
    handler.wookmark(options);
  }, 500);
});
于 2014-11-19T19:21:29.877 回答