티스토리 뷰
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> |
'jquery' 카테고리의 다른 글
[jQuery] td:eq(index) 테이블 선택 데이터 정보 가져오기 (0) | 2018.10.11 |
---|---|
jquery serialize (0) | 2018.10.01 |
[jquery 그리드] 데이타 테이블 적용방법 - DataTables is a plug-in for the jQuery Javascript library (0) | 2017.06.21 |
[ajax] ajax를 이용해 코드값을 select 태그로 만들어주기 (0) | 2017.06.12 |
[jquery] radio 버튼 체크여부 알아보기 (0) | 2017.06.12 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- xe애드온
- 스크래핑
- 파싱
- 오라클
- EC
- JDBC
- C언어
- webix
- MySQL
- 플러터
- proc
- 자바
- C
- 인포믹스
- 프로씨
- 문자열
- php
- 이클립스
- 라이믹스 모듈
- xe addon
- 파이썬
- KG
- 자바 smtp
- ocjap
- ocajp
- esql
- Python
- XE
- XE3
- 포인터
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
글 보관함