Изотоп js сбой при загрузке - PullRequest
Новая
       10

Изотоп js сбой при загрузке

0 голосов
/ 02 февраля 2020

Моя проблема в том, что когда я загружаю свой изотоп. js сетка загружается по вертикальной линии. Я хочу, чтобы он загружался горизонтально. Когда я нажимаю любую из кнопок после первого щелчка, она выравнивается по горизонтали - так, как мне бы хотелось.

введите описание изображения здесь

Я скрываю текст при загрузке и использую Jquery.

Вот ссылка на мой кодовый блок

А вот код: 

$( document ).ready(function(){
  $('.grid').hide();
});

$('.button-group').click(function(){
  $('.grid').show(500);
});

// init Isotope
var iso = new Isotope( '.grid', {
  itemSelector: '.element-item',
  layoutMode: 'fitRows'
});

// filter functions
var filterFns = {
  // show if name ends with -ium
  tool: function( itemElem ) {
    var name = itemElem.querySelector('.name').textContent;
    return name.match( /tool$/ );
  }
};

// bind filter button click
var filtersElem = document.querySelector('.filters-button-group');
filtersElem.addEventListener( 'click', function( event ) {
  // only work with buttons
  if ( !matchesSelector( event.target, 'button' ) ) {
    return;
  }
  var filterValue = event.target.getAttribute('data-filter');
  // use matching filter function
  filterValue = filterFns[ filterValue ] || filterValue;
  iso.arrange({ filter: filterValue });
});

// change is-checked class on buttons
var buttonGroups = document.querySelectorAll('.button-group');
for ( var i=0, len = buttonGroups.length; i < len; i++ ) {
  var buttonGroup = buttonGroups[i];
}
 
var $items = $grid.find('.grid-item');
$grid.addClass('is-showing-items')
  .isotope( 'revealItemElements', $items );

// reveal all items after init
var $items = $grid.find('.grid-item');
$grid.addClass('is-showing-items')
  .isotope( 'revealItemElements', $items );
<body>

    <div class="wrapper">
        <div class="row button-group filters-button-group">
            <button class="col-4 toolkit rounded" data-filter=".tool">Food </button>
            <button class="col-4 education rounded" data-filter=".edu">Name</button>
            <button class="col-4 favourites rounded" data-filter=".fav">Color</button>
        </div>
    </div>
    <div class="wrapper grid">
        <div class="wrapper">
            <div class="row toolkit-fly content grid">
                <div class="col-1 rounded tool element-item grid-item" data-category="transition">pizza</div>
                <div class="col-1 rounded tool element-item grid-item" data-category="transition">Stuff like tofu</div>
                <div class="col-1 rounded tool element-item grid-item" data-category="transition">Crackers</div>
                <div class="col-1 rounded tool element-item grid-item" data-category="transition">Cheesey</div>

        <div class="wrapper">
            <div class="row education-fly content grid">
                <div class="col-4 rounded edu element-item grid-item" data-category="metalloid">Marisa</div>
                <div class="col-4 rounded edu element-item grid-item" data-category="metalloid">Zack</div>
            </div>
        </div>
        <div class="wrapper">
            <div class="row favourites-fly content grid">
                <div class="col-1 rounded fav element-item grid-item" data-category="post-transition">Sunset</div>
                <div class="col-1 rounded fav element-item grid-item" data-category="post-transition">Yellow</div>
                <div class="col-1 rounded fav element-item grid-item" data-category="post-transition">Orange</div>

            </div>
        </div>
    </div>

1 Ответ

0 голосов
/ 05 февраля 2020

Работает сейчас.

Комментарий $('.grid').hide(); и $('.grid').show(500);.

Используйте css, чтобы сначала спрятать все div. .cust-hidden{visibility: hidden;}

var iso;
$( document ).ready(function(){
  //$('.grid').hide();
  // init Isotope
  iso = new Isotope( '.grid', {
    itemSelector: '.element-item', layoutMode: 'fitRows'
  });
  
  $('.grid').addClass('cust-hidden');
  
});

$('.button-group').click(function(){
  //$('.grid').show(500);
  $('.grid').removeClass('cust-hidden');
});


// filter functions
var filterFns = {
  // show if name ends with -ium
  tool: function( itemElem ) {
    var name = itemElem.querySelector('.name').textContent;
    return name.match( /tool$/ );
  }
};

// bind filter button click
var filtersElem = document.querySelector('.filters-button-group');
filtersElem.addEventListener( 'click', function( event ) {
  // only work with buttons
  if ( !matchesSelector( event.target, 'button' ) ) {
    return;
  }
  var filterValue = event.target.getAttribute('data-filter');
  // use matching filter function
  filterValue = filterFns[ filterValue ] || filterValue;
  iso.arrange({ filter: filterValue });
});

// change is-checked class on buttons
var buttonGroups = document.querySelectorAll('.button-group');
for ( var i=0, len = buttonGroups.length; i < len; i++ ) {
  var buttonGroup = buttonGroups[i];
}
 
.cust-hidden{
  visibility: hidden;
}
<script src="https://unpkg.com/isotope-layout@3.0.6/dist/isotope.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
    <div class="wrapper">
        <div class="row button-group filters-button-group">
            <button class="col-4 toolkit rounded" data-filter=".tool">Food </button>
            <button class="col-4 education rounded" data-filter=".edu">Name</button>
            <button class="col-4 favourites rounded" data-filter=".fav">Color</button>
        </div>
    </div>
    <div class="wrapper grid">
        <div class="wrapper">
            <div class="row toolkit-fly content grid">
                <div class="col-1 rounded tool element-item grid-item" data-category="transition">Cheese</div>
                <div class="col-1 rounded tool element-item grid-item" data-category="transition">Bread</div>
                <div class="col-1 rounded tool element-item grid-item" data-category="transition">Gouda</div>
                <div class="col-1 rounded tool element-item grid-item" data-category="transition">blue cheese</div>
                <div class="col-1 rounded tool element-item grid-item" data-category="transition">lard</div>
                <div class="col-1 rounded tool element-item grid-item" data-category="transition">tacos</div>
                <div class="col-1 rounded tool element-item grid-item" data-category="transition">pizza</div>
                <div class="col-1 rounded tool element-item grid-item" data-category="transition">Stuff like tofu</div>
                <div class="col-1 rounded tool element-item grid-item" data-category="transition">Tofu</div>
                <div class="col-1 rounded tool element-item grid-item" data-category="transition">Crackers</div>
                <div class="col-1 rounded tool element-item grid-item" data-category="transition">Cheesey</div>

        <div class="wrapper">
            <div class="row education-fly content grid">
                <div class="col-4 rounded edu element-item grid-item" data-category="metalloid">Marisa</div>
                <div class="col-4 rounded edu element-item grid-item" data-category="metalloid">Zack</div>
                <div class="col-4 rounded edu element-item grid-item" data-category="metalloid">Lorna</div>
            </div>
        </div>
        <div class="wrapper">
            <div class="row favourites-fly content grid">
                <div class="col-1 rounded fav element-item grid-item" data-category="post-transition">Sunset</div>
                <div class="col-1 rounded fav element-item grid-item" data-category="post-transition">Yellow</div>
                <div class="col-1 rounded fav element-item grid-item" data-category="post-transition">Orange</div>
                <div class="col-1 rounded fav element-item grid-item" data-category="post-transition">Red</div>
                <div class="col-1 rounded fav element-item grid-item" data-category="post-transition">Green</div>
                <div class="col-1 rounded fav element-item grid-item" data-category="post-transition">Blue</div>
            </div>
        </div>
    </div>
...