Как отобразить div в случайном порядке с упаковкой. js - PullRequest
Новая
       42

Как отобразить div в случайном порядке с упаковкой. js

0 голосов
/ 16 апреля 2020

У меня есть пакет. js макет div трех разных размеров. Я бы хотел, чтобы они появлялись в случайном порядке каждый раз при загрузке страницы, но пока я могу получить только содержимое внутри блоков для рандомизации. Поэтому при refre sh я получаю div в том же порядке / шаблоне, но содержимое внутри в другом порядке.

Вот основные c HTML: 

<div class="container">
  <div class="grid">
    <div class="grid-item grid-item--height2">
      <div class="grid-item-content">
        <p>content here</p>
      </div>
    </div>
    <div class="grid-item grid-item--width2">
      <div class="grid-item-content">
        <p>content here</p>
      </div>
    </div>
    <div class="grid-item">
      <div class="grid-item-content">
        <p>content here</p>
      </div>
    </div>
  </div>
</div>

Вот мой CSS: 

.grid {
  width: 100vw;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-item {
  float: left;
  width: 120px;
  height: 120px;
  background: #ffffff;
  border: 2px solid hsla(0, 0%, 0%, 0.5);
}

.grid-item:hover {
  cursor: pointer;
}

.grid-item--width2 { width: 240px; }
.grid-item--height2 { height: 240px; }

.grid-item--large {
  width: 480px;
  height: 300px;
  background-color: slategrey;
}

& мой Javascript: 

var $grid = $('.grid').packery({
  itemSelector: '.grid-item'
});

$grid.on( 'click', '.grid-item', function( event ) {
  // change size of item by toggling large class
  $(  event.currentTarget  ).toggleClass('grid-item--large');
  // trigger layout after item size changes
  $grid.packery('layout');
});

  (function($) {

            $.fn.randomize = function(tree, childElem) {
              return this.each(function() {
                var $this = $(this);
                if (tree) $this = $(this).find(tree);
                var unsortedElems = $this.children(childElem);
                var elems = unsortedElems.clone();

                elems.sort(function() { return (Math.round(Math.random())-0.5); });  

                for(var i=0; i < elems.length; i++)
                  unsortedElems.eq(i).replaceWith(elems[i]);
              });    
            };

          })(jQuery);

          $(document).ready(function() {
              $(".container").css("display", "block");
              $("div.grid").randomize("div.grid-item");
          });

Я не знаю, просто ли я ставлю js в неправильном порядке или что-то, но я не могу понять это - я был бы действительно признателен за sh в правильном направлении!

Спасибо.

Ответы [ 2 ]

0 голосов
/ 06 мая 2020

Так что я разобрался, на случай, если кому-то интересно.

HTML (встроенный CSS только для иллюстрации того, что элементы div рандомизируются по порядку, а не только по содержимому): 

<div class="container">
  <div class="grid">

    <div class="grid-item">
      <div style="background-color: red;" class="grid-item-content expand">
        <p>content here #1</p>
      </div>
    </div>

    <div class="grid-item">
      <div style="background-color: blue;" class="grid-item-content expand">
        <p>content here #2</p>
      </div>
    </div>

    <div class="grid-item">
      <div style="background-color: green;" class="grid-item-content expand">
        <p>content here #3</p>
      </div>
    </div>

    <div class="grid-item">
      <div style="background-color: yellow;" class="grid-item-content expand">
        <p>content here #4</p>
      </div>
    </div>

    <div class="grid-item">
      <div style="background-color: orange;" class="grid-item-content expand">
        <p>content here #5</p>
      </div>
    </div>

    <div class="grid-item">
      <div style="background-color: purple;" class="grid-item-content expand">
        <p>content here #6</p>
      </div>
    </div>

  </div>
</div>

CSS: 

.expand {
  display: block;
  width: 150px;
  height: 150px;
}

.expand:hover {
  cursor: pointer;
}

.grid-item-content {
  width: 150px;
  height: 150px;
  border: 1px solid black;
}

.grid-item--large {
  width: 520px;
  height: 375px;
}

& JS: 

$(document).ready(function () {
  var $grid = $(".grid").packery({
    itemSelector: ".grid-item"
  });

  $grid.on("click", ".expand", function (event) {
    $(event.currentTarget).toggleClass("grid-item--large");
    $grid.packery("layout");
  });

});

(function ($) {
  $.fn.randomize = function (tree, childElem) {
    return this.each(function () {
      var $this = $(this);
      if (tree) $this = $(this).find(tree);
      var unsortedElems = $this.children(childElem);
      var elems = unsortedElems.clone();

      elems.sort(function () {
        return Math.round(Math.random()) - 0.5;
      });

      for (var i = 0; i < elems.length; i++)
        unsortedElems.eq(i).replaceWith(elems[i]);
    });
  };
})(jQuery);

$("div.grid").randomize("div.grid-item");

Кодовая ссылка: https://codepen.io/ddmmyyyy/pen/OJyQmQz

0 голосов
/ 16 апреля 2020

Причина случайного рандомизации только содержимого заключается в том, что вы сортируете дочерние узлы div.grid-item вместо дочерних div.grid

Во-вторых, я думаю, что packery добавляет абсолютное позиционирование к узлам элемента сетки. Таким образом, исправление кода js не будет отражать правильное позиционирование, если только 

position: relative !important;
left: 0 !important;
top: 0 !important;

не будет добавлено к .grid-item классу.

Создано перо для этого. https://codepen.io/11kodykay11/pen/xxwVOra

...