<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.grid {
width: 1200px;
}
.grid img {
width: 100%;
display: block
}
.grid-item {
width: 200px;
}
.grid-item--width2 {
width: 300px;
}
</style>
</head>
<body>
<div class="portfolioFilter">
<a href="#" data-filter="*" class="current">All Categories</a>
<a href="#" data-filter=".web">web</a>
<a href="#" data-filter=".mobile">mobile</a>
</div>
<div id="masonry" class="portfolioContainer">
<div class="web">
<img src="http://www.webk.kr/data/file/item_portfolio/thumb-2041168825_Laipuldt_portfolio_16_220x270.jpg">
<span class="title"></span>
</div>
<div class="mobile">
<img src="http://www.webk.kr/data/file/item_portfolio/thumb-2041168825_Laipuldt_portfolio_16_220x270.jpg">
<span class="title"></span>
</div>
<div class="mobile">
<img src="http://www.webk.kr/data/file/item_portfolio/thumb-2041168825_Laipuldt_portfolio_16_220x270.jpg">
<span class="title"></span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<script>
$(window).load(function() {
var $container = $('.portfolioContainer');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.portfolioFilter a').click(function() {
$('.portfolioFilter .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});
</script>
</body>
</html>
port.html'web > 완성소스' 카테고리의 다른 글
| 삼성 드레그 메뉴 소스 ( 자작 ) (0) | 2020.09.14 |
|---|---|
| gnb 접근성 tab 이동 2번째 (0) | 2019.02.08 |
| gnb 접근성 tab 이동 (0) | 2019.02.08 |