Оформление на зидана решетка с мащабиране, за да пасне на контейнера

Така че се опитвам да направя нещо подобно: http://prothemeus.com/demo/litho/

Попаднах на: http://masonry.desandro.com/, http://isotope.metafizzy.co/ и http://packery.metafizzy.co/ всички те наистина са сходни, но никой от тях не предлага мащабиране, както прави уебсайтът най-горе. Как да създам нещо подобно с един от тези плъгини или някой знае ли за такъв, който предлага опцията за мащабиране, за да пасне на контейнера по подразбиране?

Що се отнася до демонстрацията, успях да разбера, че isotope управлява оформлението, но не можах да проследя кода, който прави действителното мащабиране.

Всяка помощ ще бъде високо оценена.


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