Wookmark 플러그인, 이미지 겹침 문제

Question

wookmark jquery 플러그인을 사용하고 있습니다. 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(); 
}; 

Answer 1

봅니다 여기지만 미래를위한 파티에 늦은 두 번

$(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

을 handler.wookmark 호출 문제가있는 개발자는이 도움이 될 수 있습니다 ....

이미지로드가 느리면 Wookmark에 요소 크기 조정에 문제가 발생할 수 있습니다. 이것을 해결하는 쉬운 방법 중 하나는 위에서 언급 한 byroncorrales와 같은 핸들러를 다시 호출하는 것입니다. 그러나 이렇게하면 모든 것이로드되었는지를 확인할 수 없습니다. 우리는 DOM이 완전히로드 된 다음 핸들러를 다시 호출하기를 기다리고 싶다.

그래서이 간단한 jQuery 조각을 추가하십시오.

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

Answer 3

또는 나중에 다른 새로 만들기 -

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