Как создать сортируемую картинную галерею? - PullRequest
Новая
       33

Как создать сортируемую картинную галерею?

1 голос
/ 31 мая 2019

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

Изображения будут включать несколько интерактивных ссылок, и я также хотел бы, чтобы посетители при просмотре списка / таблицы были в курсе того, что вы живете.

Заранее большое спасибо ...))

Ответы [ 2 ]

1 голос
/ 03 июня 2019

Я не могу дать вам больше, чем рекомендацию библиотеки, но я думаю, что вот как это сделать: посмотрите на Isotope , библиотеку JS для генерации "фильтра & сортировать магические макеты ". Похоже, что вы хотите.
Демо на сайте, указанном выше, в основном говорит само за себя. Вы можете увидеть код для демонстрации в этом коде (также взятом с сайта, указанного выше).

То, как это работает, заключается в том, что вы снабжаете свою разметку метаданными для соответствующих элементов, а библиотека предоставляет вам функции фильтрации и сортировки и отображает сетку с вашими элементами: 

<div class="element-item metalloid " data-category="metalloid">
    <h3 class="name">Tellurium</h3>
    <p class="symbol">Te</p>
    <p class="number">52</p>
    <p class="weight">127.6</p>
</div>

Тогда просто иметь кнопки фильтра для сетки следующим образом: 

<button class="button" data-filter=".metal">metal</button>

(образцы из авторучки!)

Надеюсь, эта подсказка поможет вам - она, безусловно, дает вам больше контроля, чем готовая галерея Youtube (если она вообще есть, я не знаю) - но, в свою очередь, вам придется немного поднять руки грязное написание кода.

0 голосов
/ 08 июня 2019

Ознакомьтесь с сортируемыми элементами jQuery UI "Отображать как сетку":

https://jqueryui.com/sortable/#display-grid

Вы можете сделать что-то вроде этого: 

    <ul id="sortable">
        <li class="ui-state-default">
            <img src="something.png">
        </li>
    </ul>


$( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
#sortable { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  width: 450px; 
}
 #sortable li { 
   margin: 3px 3px 3px 0; 
   padding: 1px; 
   float: left; 
   width: 100px; 
   height: 90px; 
   font-size: 4em; 
   text-align: center;
   background: #ddd;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable">
  <li class="ui-state-default">1</li>
  <li class="ui-state-default">2</li>
  <li class="ui-state-default">3</li>
  <li class="ui-state-default">4</li>
  <li class="ui-state-default">5</li>
  <li class="ui-state-default">6</li>
  <li class="ui-state-default">7</li>
  <li class="ui-state-default">8</li>
  <li class="ui-state-default">9</li>
  <li class="ui-state-default">10</li>
  <li class="ui-state-default">11</li>
  <li class="ui-state-default">12</li>
</ul>
...