0
검색 쿼리를 사용하여 이미지를로드하고 jQuery Blocks It Plugin (BlocksIt.js)을 사용하여 이미지를로드하려고합니다. 이는 관련 자바 스크립트입니다 :AJAX를 통해로드 된 이미지의 위치 지정
<script>
function getResults(query, max, $selector)
{
$selector.html("Loading...");
$.getJSON('/search', {query: query, max: max}, function(data) {
var items = data;
$selector.html("");
for(var i=0; i<data.length; ++i)
$selector.html($selector.html()+"<div class='img-holder' ><img class='search-image' src='"+ data[i] +"' /></div>");
});
$selector.waitForImages({
finished: function(){
$selector.BlocksIt({
numOfCol: 4,
offsetX: 1,
offsetY: 1
});
},
waitForAll: true
});
$selector.css({height: '500px', overflow: 'auto'});
}
jQuery(function($) {
$('form[data-async]').live('submit', function(event) {
getResults($('#db-search').val(), 20, $('.search-results'));
$('.search-results').BlocksIt({
numOfCol: 4,
offsetX: 1,
offsetY: 1
});
event.preventDefault();
});
});
</script>
그리고 DOM은 다음과 같이 진행됩니다
<div class='row-fixed'>
<div class='span4'>
<form data-async class="search-form navbar-search pull-left" action='/search'>
<input type="text" id='db-search' class="search-query" name='query' placeholder="Search" />
<input type='hidden' name='max' value=20 />
</form>
<div class="search-results" style="width: 100%; height:500px; position:relative;">
</div>
</div>
</div>
나는 이미지가로드 한 번 후, 전에 한 번, 두 번 BlocksIt() 함수를 호출하고있다. 나는 한 번만 (이미지로드 전후 모두) 한 번 시도했지만 작동하지 않는 것 같습니다. 이미지는 너비의 100 %에 해당하는 너비가 div.search-results
으로 표시됩니다. 내가 크롬 개발 도구에서 함수를 호출 할 때 이미지가로드 된 후 그러나 콘솔 창은 같이
$('.search-results').BlocksIt({
numOfCol: 4,
offsetX: 1,
offsetY: 1
});
이미지 정렬과 완벽하게 크기가 조정받을. 제발 날 제대로 도와주세요.
실제로 검색 상자에서 return을 누르면 호출됩니다. ('console.log()'를 호출하여 확인). 물론 이것이 호출되지 않으면 AJAX 호출이 수행되지 않고 이미지가로드되지 않습니다. – rarora7777
좋습니다! 하지만 내 첫 번째 촬영은 그 코드에 너무 나빠 보인다! – Damian0o