소재 디자인 lite masonry layout with cards

Question

Material Design Lite로 "Pinterest"스타일 레이아웃을 만들려고합니다. 큰 문제는 지금까지 카드가 같은 높이로만 만들 수 있다는 것입니다.

CSS 및 열 수 (MDL없이)로 할 수 있었지만 MDL에서 제공하는 스타일링을 사용하고 싶습니다. MDL과 column-count를 사용하면 이상한 레이아웃이 생깁니다. 내 카드의 크기는 다양하며 그리드 레이 아웃으로 높이가 높아 지므로 카드의 내부에 큰 틈이있을 때 나 빠진다. 나는 그것이 의미가 있기를 바랍니다. 필요한 경우 Wordpress 테마 코드를 붙여 넣을 수는 있지만 도움이 될지 확실하지 않습니다.

나는 누군가가

Answer 1

당신이 그렇게하기 위해이 경량 자바 스크립트 http://masonry.desandro.com/을 사용할 수 있습니다 :-) 나를 도울 수 있기를 바랍니다. 이런 식으로 사용하십시오.

<div class="mdl-grid masonry-grid"> 
    <div class="mdl-cell mdl-cell--4-col-desktop masonry-grid-item"> 
    </div> 
    <div class="mdl-cell mdl-cell--4-col-desktop masonry-grid-item"> 
    </div> 
</div> 
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> 
<script> 
    var elem = document.querySelector('.masonry-grid'); 
    var msnry = new Masonry(elem, { 
    // options 
    itemSelector: '.masonry-grid-item' 
    }); 
</script>