Question

我想创建一个youtuber画廊（或我不知道的桌子），头像上的图片可以按sexe，国家/地区，年龄...排序（最好在侧面进行设置）。

图片中将包含互动的几个链接，我还希望访问者在查阅列表/表格时了解哪些YouTube直播者。

非常感谢...））

Answer 1

在这里，我不能给您太多关于库的建议，但是我想这样子是可以的：看一下Isotope，这是一个生成“ Filter＆sort的JS库。神奇的布局”。。看起来很像你想要的。
上面链接的站点上的演示基本上说明了一切。您可以在this codepen中查看该演示的代码（也来自上面链接的网站）。

它的工作方式是为标记中的各个元素提供元数据，并且库为您提供过滤和排序功能，并显示包含元素的网格布局：

<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画廊给您更多的控制权（如果根本不存在，我不知道）-但反过来，您还需要动手一点编写代码很脏。

Answer 2

检出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>

如何创建可排序的图片库？

2 个答案: