Изотоп jQuery - центрированный и жидкостный/реагирующий

Я задаю вопрос о Isotope

Это отличный плагин для jQuery.

Я играл с ним какое-то время, но я не знаю достаточно о javascript, чтобы объединить два метода изотопа, отзывчивый изотоп и центрированный изотоп.

Я успешно использовал отзывчивый мод, и он работал очень хорошо, но теперь мне нужно сосредоточить все это на div. Режим централизованного макета не документирован, а также режим реагирования, поэтому у меня возникают проблемы с его работой. В основном, для режима центрированной компоновки являются:

Чтобы использовать этот мод, скопируйте пересмотренные методы, найденные в источнике страницы демонстраций.

К сожалению, в источнике просмотра есть все виды javascript, и у меня недостаточно опыта работы с javascript, чтобы выбрать его, а также объединить его с отзывчивым script. У меня уже есть работа.

Любая помощь будет принята с благодарностью.

Сайт с рабочим примером того, что мне нужно.

Мой сайт, на котором я экспериментирую.

В Firefox лучше работать. Я думаю.

ОТВЕТЫ

Ответ 2

Этот jsfiddle, вероятно, решит вашу проблему: http://jsfiddle.net/schmidjon/6Z3sn/. Это простое расширение Изотопа с точками останова:

(function ($) {
var $container = $('.example'),
    colWidth = function () {
        var w = $container.width(), 
            columnNum = 1,
            columnWidth = 0;
        if (w > 1200) {
            columnNum  = 5;
        } else if (w > 900) {
            columnNum  = 4;
        } else if (w > 600) {
            columnNum  = 3;
        } else if (w > 300) {
            columnNum  = 2;
        }
        columnWidth = Math.floor(w/columnNum);
        $container.find('.item').each(function() {
            var $item = $(this),
                multiplier_w = $item.attr('class').match(/item-w(\d)/),
                multiplier_h = $item.attr('class').match(/item-h(\d)/),
                width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4,
                height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4;
            $item.css({
                width: width,
                height: height
            });
        });
        return columnWidth;
    },
    isotope = function () {
        $container.isotope({
            resizable: false,
            itemSelector: '.item',
            masonry: {
                columnWidth: colWidth(),
                gutterWidth: 4
            }
        });
    };
    isotope();
    $(window).smartresize(isotope);
}(jQuery));

Источник: Использование изотопа jQuery для кладки в макетах жидкостей

Ответ 3

попробуйте использовать переход в вашем файле css для каждого из ваших классов в дочернем контенте. это должно быть полезно, и это может быть более медленным

.css

 -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

надеюсь, что эта работа