2016-08-04 2 views
1

페이지 당 여러 개의 벽돌 그리드가 필요합니다. WordPress 루프로 코드를 생성하므로 모든 div 컨테이너의 클래스 이름이 같습니다.페이지 당 동일한 클래스 이름으로 여러 번 벽돌을 사용할 수 있습니까?

같은 이름의 모든 div 컨테이너에서 Masonry를 호출하는 방법이 있습니까? 당신을 위해

http://codepen.io/anon/pen/OXBrPb

감사 : 여기에 HTML

<!--Masonry 1--> 
<div class="print-slider"> 
    <div class="print-slider-sizer"></div> 
    <div class="gutter-sizer"></div> 
    <div class="print-slider-item"></div> 
    <div class="print-slider-item"></div> 
    <div class="print-slider-item"></div> 
    <div class="print-slider-item"></div> 
</div> 

<!--Masonry 2--> 
<div class="print-slider"> 
    <div class="print-slider-sizer"></div> 
    <div class="gutter-sizer"></div> 
    <div class="print-slider-item"></div> 
    <div class="print-slider-item"></div> 
    <div class="print-slider-item"></div> 
    <div class="print-slider-item"></div> 
</div> 

JS

var grid = document.querySelector('.print-slider'); 
var msnry; 

imagesLoaded(grid, function() { 
    // init Isotope after all images have loaded 
    msnry = new Masonry(grid, { 
    itemSelector: '.print-slider-item', 
    columnWidth: '.print-slider-sizer', 
    gutter: '.gutter-sizer', 
    percentPosition: true, 
    }); 
}); 

이 문제에 대한 코드 펜입니다 r 도움!

답변

1

document.querySelector('.print-slider')을 사용하면 print-slider 클래스를 가진 첫 번째 html 요소 만 얻을 수 있습니다. 그래서 첫 번째 벽돌 만 초기화됩니다.

아래 코드는 모두 .print-slider 요소를 잡고 각각 초기화합니다. 차이점은 클래스 이름을 기준으로 요소를 얻은 다음 루프를 반복하는 것입니다. imagesLoaded에 대한 선택기로 body을 사용했습니다. 전체 HTML 구조가 없기 때문입니다. 한 div에있는 벽돌을 감싸고 이미지가로드되는지 여부를 확인하기 위해 해당 div를 사용하는 것이 좋습니다. 또는 foreach 내부에서 초기화를 수행하기 전에 각 벽돌에 대한 검사를 별도로 수행하십시오.

var elements = document.getElementsByClassName('print-slider'); 
var msnry; 

imagesLoaded(document.querySelector('body'), function() { 
    // init Isotope after all images have loaded 
    var n = elements.length; 
    for(var i = 0; i < n; i++){ 
    msnry = new Masonry(elements[i], { 
     itemSelector: '.print-slider-item', 
     columnWidth: '.print-slider-sizer', 
     gutter: '.gutter-sizer', 
     percentPosition: true, 
    }); 
    } 
}); 
+0

고맙습니다! 그건 완벽하게 작동합니다 :) –

+0

나는 그것이 도움이 된 것을 기쁘게 생각합니다 :) – trajchevska