답변 6개
제이쿼리 플러그인 맞습니다.
https://www.final-tiles-gallery.com/gallery-with-filters
이런걸 사용 한듯 하고 이것 말고도 여러가지 있습니다.
댓글을 작성하려면 로그인이 필요합니다.
http://bossato.github.io/sample/wookmark/example-api/">http://bossato.github.io/sample/wookmark/example-api/
댓글을 작성하려면 로그인이 필요합니다.
</p>
<p><style>
.float_clear:after {content: ""; display: block; clear: both; visibility: hidden;}
ul.list_0 > li {float: left; width: 23%; height: 50x; border: 2px solid black; margin: 5px; font-size: 30px; text-align: center; line-height: 50px;}
ul.list_1 > li {float: left; width: 300px; height: 300px; border: 2px solid black; margin: 5px; font-size: 30px; text-align: center; line-height: 300px;}
</style></p>
<p><ul class="list_0 float_clear">
<li id="A">A</li>
<li id="B">B</li>
<li id="C">C</li>
<li id="D">D</li>
</ul>
<ul class="list_1 float_clear">
<li class="A">1</li>
<li class="A">2</li>
<li class="D">3</li>
<li class="D">4</li>
<li class="B">5</li>
<li class="B">6</li>
<li class="C">7</li>
<li class="C">8</li>
<li class="C">9</li>
<li class="D">0</li>
<li class="C">1</li>
<li class="C">2</li>
<li class="C">3</li>
<li class="D">4</li>
<li class="A">5</li>
</ul></p>
<p><script></p>
<p>$(function(){
$('.list_0 > li').on('click', function(e){
var targetA = e.target.id;</p>
<p> if ( !$(this).hasClass('on') ) {
$('.list_1 > li').each(function(){
if ( $(this).hasClass(targetA) ) {
$(this).stop().fadeIn(300);
} else {
$(this).stop().fadeOut(300);
}
});
}
});
});</p>
<p></script></p>
<p>
대충 비슷하게 만들어봤는데 작동은 하네요.
댓글을 작성하려면 로그인이 필요합니다.
정렬은 플러그인 썻고 사라지고 나타나는건 직접 구현했네요.
</p>
<p>$("#all-nav .cate a").click(function(){
if(!$(this).hasClass("current")){
var c = $(this).attr("class");
var $this = $(this);
$("#image-list li").each(function(){
if( $this.hasClass("all") ){
$(this).addClass("sort");
$(this).find("a").stop().fadeIn(300);
}else if($(this).hasClass( c )){
$(this).addClass("sort");
$(this).find("a").stop().fadeIn(300);
}else{
$(this).removeClass("sort");
$(this).find("a").stop().fadeOut(300);
}
});
$('#image-list ul').freetile("layout", {
animate : true, selector : "#image-list li.sort"
});
$("#all-nav .cate .current").removeClass("current").stop().fadeTo(200, 0.3);
$(this).addClass("current");
}
return false;
if($(this).hasClass("current")){
return false;}
});</p>
<p>
답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인