同位素 js 加载失败

Question

我的问题是，当我加载 Isotope.js 网格时，它会以垂直线加载。我希望它水平加载。当我在第一次单击后单击任何按钮时，它会水平对齐——这是我希望的方式。

enter image description here

我在加载时隐藏文本并使用 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>

Answer 1

现在正在运行。

评论 $('.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>

同位素 js 加载失败

Isotope js failing onload

jquery

jquery-isotope