벽돌 : 이미지가 세로로 쌓여 하나의 이미지가 각 행에 표시됩니다.

Question

내 웹 페이지에서 석조물을 사용하고 있습니다. 문제는 페이지가로드 된 후 모든 이미지가 세로로 쌓여 하나의 이미지가 연속적으로 표시된다는 것입니다. 나는 그들에게 수평과 수직으로 쌓아두기를 바란다. My Jsfiddle.

나는 HTML에서 다음 코드를 사용하여 참조 :

<div class="container"> 

     <div id="items"> 
      <!-- the .box repeats several times --> 
      <div class="box panel panel-default"> 
       <img src="http://placehold.it/200x150/333333/ffffff"> 
       <div class="panel-body"> 
        name：1<br> 
        publisher：2 
       </div> 
      </div> 
     </div>   

</div> 

다음과 같은 자바 스크립트 코드 :

$(document).ready(function(){  
    var $container = $('#items'); 

    $container.masonry({ 
     itemSelector: '.box', 
     isFitWidth: true 
    }); 
}); 

또한 CSS :

.box { margin: 5px; width: 214px; } 

.box img { width: 100%; } 

.panel .panel-heading { 
    color: #ffffff; 
    text-align: center; 
    margin-right: 0; 
    height: 150px 
} 

---- ---------------- 업데이트 ---------------------

위의 코드는 내 웹 페이지의 추상화입니다. 첫 번째 버전의 피들 (http://jsfiddle.net/shapeare/saonpswu/)에서 실수로 .box을 별도의 #items에 넣었습니다. 따라서 코드가 작동하지 않았습니다. 이 문제는 @Skelly에 의해 지적되었습니다. 고마워, 스켈리. 이제 위의 데모 (http://jsfiddle.net/shapeare/saonpswu/1)를 위해 바이올린이 작동하지만 내 웹 페이지는 여전히 작동하지 않습니다. 지금은 다음과 바이올린에 내 웹 페이지로 거의 동일한 콘텐츠를 넣어 가지고 :없는 별도의 DIV 년대에이되도록

http://jsfiddle.net/shapeare/saonpswu/2

Answer 1

당신의 HTML을 수정 id="items"

<div id="items"> 
    <div class="box panel panel-default"> 
     <img src="http://placehold.it/200x150/333333/ffffff"> 
     <div class="panel-body"> 
      name：1<br> 
      publisher：2 
     </div> 
    </div> 

    <div class="box panel panel-default"> 
     <img src="http://placehold.it/200x150/333333/ffffff"> 
     <div class="panel-body"> 
      name：1<br> 
      publisher：2 
     </div> 
    </div> 

    <div class="box panel panel-default"> 
     <img src="http://placehold.it/200x150/333333/ffffff"> 
     <div class="panel-body"> 
      name：1<br> 
      publisher：2 
     </div> 
    </div> 

    <div class="box panel panel-default"> 
     <img src="http://placehold.it/200x150/333333/ffffff"> 
     <div class="panel-body"> 
      name：1<br> 
      publisher：2 
     </div> 
    </div> 
</div> 

데모 : http://bootply.com/OD2uHuKupr

Answer 2

아마도이 문제를 일으킨 Angular.js를 사용하고 있다는 사실을 잊어 버렸습니다. 지금 내 문제를 해결 http://passy.github.io/angular-masonry/에서 지시문을 사용하고 있습니다.