jQuery Masonry динамическая ширина заголовка - PullRequest
Новая
       2

jQuery Masonry динамическая ширина заголовка

0 голосов
/ 04 ноября 2011

Поэтому я пытаюсь создать заголовок, который изменяет размеры в соответствии с текущей шириной сетки jQuery Masonry.

Мой рабочий пример здесь: http://jsfiddle.net/hGnLH/

Я пытаюсь добиться аналогичного эффекта для этого сайта: http://citizenmag.citizenm.com/ (я хочу, чтобы заголовок был таким же широким, как сетка масонства, и изменил размер при изменении ширины браузера пользователем)

Любая помощь / предложения будут высоко оценены.

1 Ответ

1 голос
/ 04 ноября 2011

В конце концов, это не так сложно. Взгляните на это обновление вашей скрипки.

Вот соответствующий JS: 

$(function() {
    $("#inner").masonry({
        columnWidth: 230,
        gutterWidth: 15,
        isAnimated: true,
        cornerStampSelector: ".corner-stamp"
    });

    $(window).resize(function() {
        var totalColWidth = $("#inner").outerWidth() - 475;
        var columns = parseInt(totalColWidth / 245);

        $("#header").animate({width:(columns*245) + 475},{duration:300, queue:false});

    });
});

При изменении размера окна вычисляет ширину «части столбца», что означает ширину #inner минус ширина большого изображения. При этом мы можем получить количество столбцов, разделив его на ширину столбца Мэнсонри плюс ширина желоба. Имея номер столбца, мы можем умножить его на 245 (ширина столбца масонства + ширина желоба) и получить ожидаемую ширину заголовка. Мы оживляем заголовок и все готово.

...