Компоновка сетки Masonry с масштабированием по размеру контейнера

Итак, я пытаюсь сделать что-то вроде этого: http://prothemeus.com/demo/litho/

Я наткнулся на: http://masonry.desandro.com/, http://isotope.metafizzy.co/ и http://packery.metafizzy.co/ все они действительно похожи, но ни один из них не предлагает такого масштабирования, как веб-сайт вверху. Как мне создать что-то подобное с помощью одного из этих плагинов, или кто-нибудь знает такой, который по умолчанию предлагает возможность масштабирования в соответствии с контейнером?

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

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


jquery css jquery-isotope jquery-masonry packery
person Matthew Abrman    schedule 10.04.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я закончил с игнорированием всех плагинов, только smartresize, который я минимизировал, потому что он распаковывался везде, где я его нашел. Не уверен, что это было от Пола Айриша или кого-то еще, в любом случае, вот jsfiddle для этого. http://jsfiddle.net/matthewabrman/6R2DU/

//smartresize
(function(e,t){var n=function(e,t,n){var r;return function(){function u(){if(!n)e.apply(s,o);r=null}var s=this,o=arguments;if(r)clearTimeout(r);else if(n)e.apply(s,o);r=setTimeout(u,t||100)}};jQuery.fn[t]=function(e){return e?this.bind("resize",n(e)):this.trigger(t)}})(jQuery,"smartresize")

function redraw_UI() {
    var content_width = $('.content').width()+20;
    images_per_row = Math.floor(content_width / 240);
    var width = Math.round(content_width / images_per_row);
    var height = Math.round(width/3*2);
    $('.content .item').each(function(id){
        var x = Math.round((id % images_per_row) * width);
        var y = Math.floor(id/images_per_row) * height + Math.floor(id/images_per_row) * 20;
        if (navigator.appName.indexOf("Internet Explorer")!=-1){
            $(this).animate({width: width-20+'px', height: height+'px', left: x, top: y},600);
        } else {
            $(this).css({'width': width-20+'px', 'height': height+'px', 'left': x, 'top': y });
        }
    });

    if (images_per_row == 1) {
        closeImagePreview();
    }
}

$(window).smartresize(redraw_UI);
$(window).ready(redraw_UI);
person Matthew Abrman    schedule 11.04.2014

arrow_upward
0
arrow_downward

Masonry поддерживает это с помощью метода bindResize: http://masonry.desandro.com/methods.html#bindresize

$container.masonry(options);
$container.masonry('bindResize')

Это вызовет макет при изменении размера. Вы также можете сделать

$(window).resize(function () {
   $container.masonry();
});

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

Затем вам нужно сделать так, чтобы контейнер реагировал так, чтобы его размер изменялся в соответствии с размером окна. Для этого вы можете заглянуть в bootstrap или создать свой собственный.

person Ford    schedule 10.04.2014