jQuery Isotope - течно оформление с два елемента с различни размери

Имам основно оформление на снимки (за портфолио) на страница. Има две тухли с изображение с различни размери, по-голямата е пропорционална на по-малката и точно два пъти по-голяма от ширината и височината и няма поле между блоковете или прозореца. Има само няколко по-големи блока, смесени с няколко дузини по-малки. Това е адаптивен дизайн, така че има пет 20% колони на сайта в пълен размер и три 33,333% колони, когато размерът на прозореца падне под определена ширина, всички в контейнер с максимална ширина 100%. Изображенията са зададени на 100% ширина и автоматична височина с CSS, вътре във всяка тухла. Включих телена рамка, за да илюстрирам това, което описвам.

Проблемът, който имам, е да накарам Isotope да реагира на разположението на течността. Ако заредя страницата в прозорец, по-широк от максималната ширина, той поставя блоковете точно както се очаква. Въпреки това, когато свия прозореца на браузъра под максималната ширина, блоковете започват да стават наистина нестабилни, в някои варианти на: подредени в една колона; подредени в две колони с празна колона между тях; празнини между изображенията; оставяйки празен ред под голямото изображение.

Вероятно не се обяснявам много добре, но просто се чудя дали някой има опит с използването на Isotope с течни оформления и може да има някаква представа.

оформление


jquery fluid-layout jquery-isotope jquery-masonry
person briteweb    schedule 17.11.2011    source източник

Отговори (2)


arrow_upward
5
arrow_downward

Успях да постигна това, като пропуснах редовете с код за изчисление на колони от изотопната демо версия тук.

$container.isotope({
    itemSelector : '.thumb',
    //disable resizing
    resizable: false,
});

//update columnWidth on window resize
$(window).smartresize(function(){
    $container.isotope({
    });
});

Това поддържа възможността за анимирано „интелигентно преоразмеряване“, но ви позволява да използвате редовни css медийни заявки, за да контролирате броя на колоните (задайте елемента „.thumb“ на желаните проценти от контейнера във вашите медийни заявки).

person Lauren    schedule 14.02.2012
comment
Браво, @Lauren. Току-що направи ужасния ми ден много по-добър. - person AJB; 15.05.2013

arrow_upward
1
arrow_downward

Работя върху оформление, което създава подобни проблеми и го разреших с помощта на новата опция за оформление на Isotope за пакетиране. Какъв божи дар! — http://isotope.metafizzy.co/layout-modes/packery.html

person Futurefabric    schedule 15.09.2014