Material Design lite макет кладки с карточками

Я пытаюсь создать макет в стиле «Pinterest» с помощью Material Design Lite. Большая проблема в том, что пока я могу создать его только с картами одинаковой высоты.

Мне удалось сделать это с помощью CSS и количества столбцов (без MDL), но я хотел бы использовать стили, предоставляемые MDL. Если я использую количество столбцов с MDL, это вызывает странную компоновку. Мои карты различаются по размеру, и это выглядит плохо, когда внутри них огромные промежутки, потому что сетка выравнивает их по высоте. Я надеюсь, что это имеет смысл. Я могу вставить свой код темы Wordpress, если это необходимо, но я не уверен, поможет ли это.

Я надеюсь, что кто-то может мне помочь :-)


masonry material-design-lite
person user7151495    schedule 13.11.2016    source источник
comment
Да, сюда нужно вставить свои коды, ошибки. Тогда вам могут помочь коллеги-программисты.   -  person Sachith Muhandiram    schedule 13.11.2016

Ответы (1)


arrow_upward
1
arrow_downward

вы можете использовать этот легкий javascript 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>
person user2558013    schedule 10.02.2017