0

以下の関数を使用して、グリッド行に同じ高さの列を設定しています。最初のページ読み込み時に、関数は高さ '0' を に設定しdiv.gallery-itemます。更新すると、関数は適切に起動し、関数で設定された高さを割り当てます。

スクリプトは次のとおりです。

/* 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();
});

何かアドバイス？

4

2 に答える 2

1

以下を使用する必要があります。

window.onload = columnConform;

それ以外の：

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

このようにして、画像のサイズと親コンテナーが関連します。

于 2014-04-17T16:41:38.460 に答える
0

$( document ).ready( handler )オンロードではなくセグメントにコードを隠してみましたか?

リンク ->ここ

于 2014-04-17T16:40:25.493 に答える