Jquery 벽돌이 여러 열을 가져 오는 데 어려움이 있습니다.

Question

Jquery 석공 술 플러그인을 사용하여 페이지가 2 열로 구성됩니다.

플러그인이 작동하는지 확신 할 수 없습니다 ... 단지 1 열만 표시하고 Jquery 코드의 열 너비를 변경하면 아무 일도 발생하지 않습니다.

코드는 - 아래 사항을 참고하십시오.

감사합니다,

파이

script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="/assets/jquery.js"></script> 
<script src="/assets/jquery.masonry.min.js"></script> 

<style> 
.item { 
width: 480px; 
..... 
} 

</style> 
<div id="container"> 
<div class="item"> 
...... 
</div> 
</div> 

<script> 
$(function(){ 
    var $container = $('#container'); 
    $container.imagesLoaded(function(){ 
     $container.masonry({ 
     itemSelector : '.tile', 
     columnWidth : 100 
     }); 
    }); 

$container.infinitescroll({ 
     navSelector : '.flickr_pagination', // selector for the paged navigation 
     nextSelector : 'a.next_page', // selector for the NEXT link (to page 2) 
     itemSelector : '.tile',  // selector for all items you'll retrieve 
     loading: { 
      finishedMsg: 'No more pages to load.', 
      img: 'http://i.imgur.com/6RMhx.gif' 
     } 
     }, 
     // trigger Masonry as a callback 
     function(newElements) { 
     // hide new items while they are loading 
     var $newElems = $(newElements).css({ opacity: 0 }); 
     // ensure that images load before adding to masonry layout 
     $newElems.imagesLoaded(function(){ 
      // show elems now they're ready 
      $newElems.animate({ opacity: 1 }); 
      $container.masonry('appended', $newElems, true); 
     }); 
     } 
    ); 
}); 
</script> 
</div> 
</div> 

Answer 1

바라건대 당신은 지금 그것을 해결 한 것이다. 다음과 같이 열 폭을 변경하는 경우에 대비하여 다음과 같이하십시오.

$container.imagesLoaded(function(){ 
    $container.masonry({ 
    itemSelector : '.tile', 
    columnWidth: function(containerWidth) 
    { 
    return containerWidth/2; 
    } 
    }); 
});