티스토리 뷰

jquery

jquery masonry

xemaker 2017. 12. 28. 23:00
https://www.final-tiles-gallery.com/#!



<script type="text/javascript">

//<![CDATA[
jQuery(window).load(function(){

var $iso_container = jQuery('#portfolioList'),
$containerProxy = $iso_container.clone().empty().css({ visibility: 'hidden' }), // create a clone that will be used for measuring container width
$iso_items = $iso_container.find('li.item');

$iso_container.after( $containerProxy );

jQuery(window).smartresize( function() {

var viewport = { width: jQuery(window).width(), height: jQuery(window).height() };
var columns = 6;

if ( viewport.width <= 979 ) columns = 4;
if ( viewport.width <= 767 ) columns = 2;
if ( viewport.width <= 480 ) columns = 1;

// calculate columnWidth
var colWidth = Math.floor( $containerProxy.width() / columns );

// resize the element depending on the columns and browsers width. Also handle new DOM elements with livequery
$iso_items.livequery(function(){
jQuery(this).css({ width: colWidth });
})

// set width of container based on columnWidth
$iso_container.css({
width: colWidth * columns
})

.isotope({
itemSelector : '.portfolio-list li.item',
resizable: false, // disable automatic resizing when window is resized

// set columnWidth option for masonry
masonry: {
gutterWidth: 0 //remove gutter
}
});

// trigger smartresize for first time
}).smartresize();

$iso_container.css({ background: 'none' }).find('li.item').css({ visibility: 'visible' });

});
//]]>
</script>


댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함