이렇게 생긴 건데요.
원래 세로 새로 여백도 생기고 이러저러 작동도 해야합니다.
이미지 하나씩을 div로 해서 for문돌려서 넣는 방식이었는데요.
플라스크 SQLalchemy이용해서 html에 jinja로 불러올땐 잘 됐었습니다.
그런데, ajax를 써야할일이 생겨서
구조를 ajax로 바꿧더니 masonry.js 가 작동을 안하네요.
어찌해야 할지...
지금 masonry.js는 조금 수정해서 사용하는 사이트를 참고하여 가져온거라
masonry.js 와는 구조가 조금 다른것같습니다.
참고한 사이트는 http://www.kristianhammerstad.com/ 이구요
하루종일 붙잡고 있었는데 안되서 ㅜㅜ 이렇게 올려봅니다.
-----
<script type="text/javascript">
$(function(){
$.ajax({
url: "/load_first_proj",
dataType: 'JSON',
success: function(data) {
var numbers = parseInt(data.numbers);
for(var i=1; i<numbers; i++){
setNews(data.proj[i]);
}
},
error: function(request,status,error){
alert("code:"+request.status+"\n"+"error:"+error);
}
});
function setNews(data) {
var url = data.proj_image
var proj_tag;
proj_tag ="<div class=\"box col "+ data.proj_type +"\">"
+ "<a href=\"/detail_proj/" + data.id + "\">"
+ "<img src=\"" + url + "\"/>"
+ "<span class=\"over\">" + data.proj_title
+ "<br>" + data.proj_year + "</span></a>"
+ "</div>"
$('.wall').append(proj_tag);
}
var
speed = 700, // office speed
$wall = $('#content').find('.wall'),
masonryOptions = { // initial masonry options
columnWidth: 110,
itemSelector: '.box:not(.invis)',
animate: true,
officeOptions: {
duration: speed,
queue: true
}
};
// run on window.load so we can capture any incoming hashes
$(window).load(function() {
// run masonry on start-up to capture all the boxes we'll need
$wall.masonry(masonryOptions);
if (window.location.hash) {
// get rid of the '#' from the hash
var possibleFilterClass = window.location.hash.replace('#', '');
switch (possibleFilterClass) {
// if the hash matches the following words
case 'residential':
case 'cultural':
case 'education':
case 'commercial':
case 'public':
case 'complex':
case 'office':
case 'urban':
case 'exhibition':
// set masonry options animate to false
masonryOptions.animate = false;
// hide boxes that don't match the filter class
$wall.children().not('.' + possibleFilterClass)
.toggleClass('invis').hide();
// run masonry again, this time with the necessary stuff hidden
$wall.masonry(masonryOptions);
break;
}
}
$wall.masonry('reloadItems');
});
$('#filtering-nav a').click(function() {
var
color = $(this).attr('class').split(' ')[0],
filterClass = '.' + color;;
if (filterClass == '.all') {
// show all hidden boxes
$wall.children('.invis')
.toggleClass('invis').fadeIn(200);
} else {
// hide visible boxes
$wall.children().not(filterClass).not('.invis')
.toggleClass('invis').fadeOut(400);
// show hidden boxes
$wall.children(filterClass + '.invis')
.toggleClass('invis').fadeIn(200);
}
$wall.masonry({
animate: true
});
// set hash in URL
window.location.hash = color;
return false;
});
/* @ndre */
$('#filtering-nav a').click(function() {
$('#filtering-nav a').removeClass("selected");
$(this).addClass("selected");
});
});
$(window).load(function() {
$('.box').mouseover(function() {
$(this).children("a").children("span").removeClass("over");
$(this).children("a").children("img").addClass("opacity");
}).mouseout(function(){
$(this).children("a").children("span").addClass("over");
$(this).children("a").children("img").removeClass("opacity");
});
});
</script>
<!-- Masonry HTML -->
<div id="content">
<div class="projects">
<!-- filtering menu -->
<ul id="filtering-nav">
<li>
<a class="all" href="index.html#all">all</a>
<a class="residential" href="index.html#residential">residential</a>
<a class="cultural" href="index.html#cultural">cultural</a>
<a class="education" href="index.html#education">education</a>
<a class="commercial" href="index.html#commercial">commercial</a>
<a class="public" href="index.html#public">public</a>
<a class="complex" href="index.html#complex">complex</a>
<a class="office" href="index.html#office">office</a>
<a class="urban" href="index.html#urban">urban</a>
<a class="exhibition" href="index.html#exhibition">exhibition</a>
</li>
</ul>
<!-- masonry contents -->
<div class="wall">
</div>
</div>
</div>
글쓰기