jQuery 첫 페이지로드시 트리거링하지 않지만 새로 고침시 정상적으로 트리거링하지 않음

Question

아래 함수를 사용하여 표 행에서 등 높이 열을 설정합니다. 초기 페이지로드시이 함수는 높이를 'div.gallery-item'에 '0'으로 설정합니다. 리프레시 할 때이 함수는 적절하게 시작하고 함수에서 설정 한 높이를 지정합니다.

/* Responsive equal height columns for gallery (http://css-tricks.com/examples/EqualHeightsInRows/) */ 

var currentTallest = 0, 
currentRowStart = 0, 
rowDivs = new Array(); 

function setConformingHeight(el, newHeight) { 
// set the height to something new, but remember the original height in case things  change 
el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"))); 
el.height(newHeight); 
} 

function getOriginalHeight(el) { 
// if the height has changed, send the originalHeight 
return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")); 
} 

function columnConform() { 

// find the tallest DIV in the row, and set the heights of all of the DIVs to match it. 
$('div.gallery-item').each(function() { 

    // "caching" 
    var $el = $(this); 

    var topPosition = $el.position().top; 

    if (currentRowStart != topPosition) { 

     // we just came to a new row. Set all the heights on the completed row 
     for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest); 

     // set the variables for the new row 
     rowDivs.length = 0; // empty the array 
     currentRowStart = topPosition; 
     currentTallest = getOriginalHeight($el); 
     rowDivs.push($el); 

    } else { 

     // another div on the current row. Add it to the list and check if it's taller 
     rowDivs.push($el); 
     currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest); 

    } 
    // do the last row 
    for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest); 

}); 

} 


$(window).resize(function() { 
columnConform(); 
}); 

$(function() { 
columnConform(); 
}); 

나는 이것이 내가 기능을로드하고있어 어떻게 함께 할 수있는 뭔가 알고 :

여기 스크립트입니다. 이 스크립트를 가져온 기사에 대한 조언은 이미지가 열의 높이를 다양하게 설정하는 경우 window.onload을 사용하는 것이었지만 아래에 설명 된대로 스크립트의 마지막 부분에 추가하려고 시도했지만 기능에 ' 전혀 방아쇠를 당기지 마라.

$(window).onload = (function() { 
columnConform(); 
}); 

어떤 조언이 필요합니까?

Answer 1

당신은 사용해야

window.onload = columnConform;

대신 :

$(function() { 
    columnConform(); 
}); 

이렇게하면 이미지 크기와 부모 컨테이너가 적합합니다.

Answer 2

코드를 $(document).ready(handler) 세그먼트에로드하는 대신로드하지 않으셨습니까?

링크 ->HERE