Как реализовать рандомное появление блоков в сетке?

Question

[Сергей Горячев]

В сетке есть блоки вида <div class="portfolio__item"></div>.
Как сделать, чтобы они появлялись рандомно всегда.
После загрузки страницы, сначала 5,3,7,1,2,9 и так далее.
При следующем обновлении другой порядок (любой).

У меня чет дичь какая-то получается :)))

var randomPortfolioInterval = Math.round(Math.random() * (1000 - 500)) + 500;
setTimeout(function(){
  $('.portfolio__item').removeClass('hidden').addClass('animated fadeIn');
}, randomPortfolioInterval);

Comments

[Андрей]

Вы setTimeout один раз запускаете, а вам нужно после каждой итерации его перезапускать с новым параметром интервала.

[Froggyweb]

лучше сss delay присваивать по-моему

[Сергей Горячев]

Froggyweb, если подскажешь, как сделать еще и рандомное (каждый раз разное) появление на css, воспользуюсь)

[Сергей Горячев]

Андрей, да, спасибо, чет затупил цикличность рассмотреть)

[Froggyweb]

delay выставлять js естественно
а вообще подключил бы GSAP весит - понты

[Сергей Горячев]

Froggyweb, к проекту jQuery подключен уже, проще найти было решение на нем. Нашел. В целом удовлетворило. А городить ради такой задачки библиотечки лишние совсем не хочется) Даже мелкие)

[Froggyweb]

Сергей Горячев,

$(this).delay(n*900).fadeTo(1500, 1);

про это я и говорил ^)

GSAP это про анимацию, не про Jquery

Answer 1

[Сергей Горячев]

Годится.

$.fn.shuffle = function() {
      var m = this.length, t, i;
      while (m) {
        i = Math.floor(Math.random() * m--);
        t = this[m];
        this[m] = this[i];
        this[i] = t;
      }
      return this;
    };
    $('.portfolio__item').shuffle().each(function(n) {
      $(this).delay(n*900).fadeTo(1500, 1);
    });