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

#jquery #html #css #jquery-masonry

#jquery #HTML #css #jquery-masonry

Вопрос:

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

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

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

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

1. Я немного подправил вашу скрипку, чтобы привязать те же вычисления ширины, которые вы выполняете, к $(window).resize событию jQuery , взгляните сюда и на. Он устанавливает ширину заголовка равной #inner ширине div, хотя эта ширина не совпадает с шириной самих колонн masonry. По крайней мере, у вас есть отправная точка: P

2. @scumah Спасибо, на шаг ближе. Теперь мне просто нужно выяснить, как получить текущую ширину сетки Masonry и изменить размер заголовка до этой ширины.

Ответ №1:

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

Вот соответствующий 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});

    });
});

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