Wookmark插件，與重疊圖像的問題

Question

我使用的是wookmark jquery插件，它可以很好地與除PC和Mac上Safari瀏覽器以外的所有瀏覽器一起使用，圖像似乎彼此重疊。我該如何解決它？提前

感謝 亞歷

這裏有插件的代碼：

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

Answer 1

儘量晚在這裏，但對於未來的呼叫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); 
}); 

Answer 2

黨開發者有問題，這可以幫助你......

如果圖像加載速度緩慢，可能會導致Wookmark在元素大小方面存在問題。解決這個問題的一個簡單方法就是重新調用像byroncorrales上面所說的處理程序。但這樣做並不能確保所有內容都已加載。我們希望等待DOM完全加載，然後再次調用處理程序。

所以最後加入這個簡單的jQuery。

$(window).load(function() { 
    handler.wookmark(options); 
}); 

Answer 3

或賺後，另一刷新 - 只有這樣，工作對我來說（我加載圖像和視頻）

$(window).load(function() { 
    setTimeout(function() { 
    handler.wookmark(options); 
    }, 500); 
});