搜索
搜索

根据窗口宽度重新排列链

Keyne Viana 发表于 Dev
42
凯恩·维亚纳

解决：我得到了@EdnilsonMaia的答案，并对其进行了改编http://codepen.io/anon/pen/QNGroX

我有一个布局，其中有像这样的用户链：

Window
-------------------
O - O - O - O - O |
                | |
O - O - O - O - O |
|                 |
O - O - O         | 
------------------
O = user
- = chain (icon)

链布局

当用户调整窗口大小时，每行的用户数减少，并且需要重新排列链，从而增加行数并减少每行的用户数。我发现它与排序算法非常相似。

请注意，当重新排列第一行的最后一个用户到第二行的最后一个位置，第二行的第一个用户到第三行的第一个位置时，它必须在更改位置时遵守它们的连接顺序。

我需要的是如何在JS中编码算法的方向。到目前为止，我的代码更改了用户的位置，但没有考虑正确的顺序以及链图标。调整回原始大小时，它也不起作用。

这是我的代码，请注意，每一行都是单独的UL：

function log(msg, debug) {
  debug = typeof debug !== 'undefined' ? debug : true;
  if (debug) {
    console.log(msg);
  }
}
$(document).ready(function() {
  $(window).on('resize', function() {
    rearrangeChain(true);
  });

  function rearrangeChain(debug) {
    debug = typeof debug !== 'undefined' ? debug : false;

    log('------------------------', debug);

    var win = $(window);

    // Percentage
    // 1170 -------- 100%
    // size -------- x
    var totalWindowWidth = 1170;
    var windowWidth = win.width();
    var percentage = (windowWidth * 100) / totalWindowWidth;
    log('Window:' + percentage + '%', debug);
    log('Window width:' + win.width() + 'px', debug);

    var slotSize = 146.25;
    var imagesPerLine = Math.floor(windowWidth / slotSize);

    log('Images per line: ' + imagesPerLine, debug);

    $('ul.users-chain-home').each(function(k) {
      //var element = $(this);

      var usersNumber = 1;
      $(this).find('.user-image').each(function() {
        var element = $(this).parent();
        //console.log('users number', usersNumber, '>', imagesPerLine);
        if (usersNumber > imagesPerLine) {
          var nextLine = $('ul.users-chain-home')[k + 1];
          console.log('Next line ' + (k + 1), nextLine);
          if (typeof nextLine != 'undefined') {
            console.log('Next line append', element[0]);
            nextLine.appendChild(element[0]);
          }
        }
        usersNumber++;

      });
      log('Users per line chain ' + k + ': ' + usersNumber, debug);
    });



  }

  rearrangeChain(true);
});
div#wrapper {
  display: inline-block
}
ul.users-chain-home {
  list-style-type: none;
  margin: 0;
  padding: 0
}
ul.users-chain-home li {
  display: inline;
}
ul.users-chain-home li div.chain-icon {
  vertical-align: middle;
  display: table-cell;
  width: 40px;
  height: 96px;
  text-align: center;
}
ul.users-chain-home li div.join-chain {
  vertical-align: middle;
  display: table-cell;
  height: 96px;
  text-align: center;
}
img.chain-icon-vertical {
  margin: 5px 42px 5px 0;
}
img.chain-icon-vertical-left {
  margin: 5px 0 5px 38px;
}
<div id="wrapper">
  <div>
    <ul class="users-chain-home">
      <li>
        <img src="img/users/1.jpg" class="user-image">
      </li>
      <li class="chain-icon">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li>
        <img src="img/users/2.jpg" class="user-image">
      </li>
      <li class="chain-icon">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li>
        <img src="img/users/3.jpg" class="user-image">
      </li>
      <li class="chain-icon">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li>
        <img src="img/users/1.jpg" class="user-image">
      </li>
      <li class="chain-icon">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li>
        <img src="img/users/2.jpg" class="user-image">
      </li>
      <li class="chain-icon">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li>
        <img src="img/users/3.jpg" class="user-image">
      </li>
      <li class="chain-icon">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li>
        <img src="img/users/1.jpg" class="user-image">
      </li>
      <li class="chain-icon show-for-large">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li class="show-for-large">
        <img src="img/users/2.jpg" class="user-image">
      </li>
      <li class="chain-icon show-for-large">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li class="show-for-large">
        <img src="img/users/2.jpg" class="user-image">
      </li>

    </ul>
  </div>

  <div class="text-right">
    <img src="img/assets/chain-icon-vertical.gif" class="chain-icon-vertical">
  </div>

  <div class="text-right">
    <ul class="users-chain-home">
      <li>
        <img src="img/users/1.jpg" class="user-image">
      </li>
      <li class="chain-icon">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li>
        <img src="img/users/2.jpg" class="user-image">
      </li>
      <li class="chain-icon">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li>
        <img src="img/users/3.jpg" class="user-image">
      </li>
      <li class="chain-icon">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li>
        <img src="img/users/1.jpg" class="user-image">
      </li>
      <li class="chain-icon">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li>
        <img src="img/users/2.jpg" class="user-image">
      </li>
      <li class="chain-icon">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li>
        <img src="img/users/3.jpg" class="user-image">
      </li>
      <li class="chain-icon">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li>
        <img src="img/users/1.jpg" class="user-image">
      </li>
      <li class="chain-icon">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li>
        <img src="img/users/2.jpg" class="user-image">
      </li>
      <li class="chain-icon">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li>
        <img src="img/users/3.jpg" class="user-image">
      </li>
    </ul>

  </div>

  <div>
    <img src="img/assets/chain-icon-vertical.gif" class="chain-icon-vertical-left">
  </div>

  <div>
    <ul class="users-chain-home">
      <li>
        <img src="img/users/1.jpg" class="user-image">
      </li>
      <li class="chain-icon">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li>
        <img src="img/users/2.jpg" class="user-image">
      </li>
      <li class="chain-icon">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li>
        <img src="img/users/3.jpg" class="user-image">
      </li>
      <li class="chain-icon">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li>
        <img src="img/users/1.jpg" class="user-image">
      </li>
      <li class="chain-icon">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li>
        <img src="img/users/2.jpg" class="user-image">
      </li>
      <li class="chain-icon">
        <div class="chain-icon">
          <img src="img/assets/chain-icon.gif">
        </div>
      </li>
      <li>
        <img src="img/users/3.jpg" class="user-image">
      </li>

    </ul>

  </div>

</div>

埃德尼森·玛亚（Ednilson Maia）

试试我的解决方案：

1）PHP / HTML

生成html元素。

<div id="content">

<ul class="user-chain">
<?php for($i = 1; $i<=50; $i++): ?>
    <li class="user-item">
        <div class="user-container">
            <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-128.png" class="user-avatar">
        </div>
    </li>
<?php endfor; ?>
</ul>

</div>

2）CSS

注意：我使用FontAwesome生成图标

    .user-chain { margin: 0; padding: 0 }
    .user-item { margin: 15px; list-style: none; max-width: 100px; position: absolute; }
    .user-container { position: relative }
    .user-avatar { max-width: 100px; max-height: 100px; display: block }

    .user-container.chain:before {
        content: "\f0c1";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        /*--adjust as necessary--*/
        color: #000;
        font-size: 18px;
        padding-right: 0.5em;
        position: absolute;
    }

    .user-container.chain-ltr:before {
         top: 50%;
         left: -24px;
         -ms-transform: rotate(-45deg); /* IE 9 */
         -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
         transform: rotate(-45deg);
         margin-top: -10px;
     }
    .user-container.chain-rtl:before {
         top: 50%;
         right: -32px;
         -ms-transform: rotate(-45deg); /* IE 9 */
         -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
         transform: rotate(-45deg);
         margin-top: -10px;
     }
    .user-container.chain-ttd:before {
          top: -20px;
        right: 50%;
        -ms-transform: rotate(45deg); /* IE 9 */
        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
        transform: rotate(45deg);
        margin-right: -12px;
    }

3）jQuery的

获取列表的容器宽度，并计算每行的最大项目数。定义一个标志以告知链中下一项的方向。使用变量（i）计算每一项的边距和下一项的方向。计算行数以定义上边距。

$(document).ready(function() {

var w_container = $('#content').width();
var elm_h = 100;
var elm_w = 100;
var elm_m = 15;
var maxNodesInLine = Math.floor(w_container / (elm_w + (elm_m *2)));
var direction = 'ltr';
var line = 0;
var i = 0;

function ltr(elm){
    console.log('function ltr');
    direction = 'ltr';

    if(i == 0){
        elm.css({"margin-left":0});
    } else{
        elm.css({"margin-left":(elm_w+(elm_m*2))*i});
    }
    elm.css({"margin-top":(elm_h+(elm_m*2))*line});

    i++;
}
function rtl(elm){
    console.log('function rtl');

    if(i == (maxNodesInLine)){
        elm.css({"margin-left":elm_m*2});
    } else{
        elm.css({"margin-left":(elm_w+(elm_m*2))*(maxNodesInLine - (i+1))});
    }
    elm.css({"margin-top":(elm_h+(elm_m*2))*line});

    i++;
}
function ttd(elm){
    console.log('function ttd');

    elm.css({"margin-top":(elm_h+(elm_m*2))*line});

    if(direction == 'ltr'){
        direction = 'rtl';
        elm.css({"margin-left":(elm_w+(elm_m*2))*(i-1)});
    }
    else{
        direction = 'ltr';
        elm.css({"margin-left":0});
    }

    i=1;
}

$( ".user-item" ).each(function( index ) {

    elm = $(this);

    if(direction == 'ltr' && i < maxNodesInLine)
    {
        ltr(elm);
        $(elm).not(':first-child').children('.user-container').addClass('chain chain-ltr');
    }
    else if(i == (maxNodesInLine)){
        line++;
        ttd(elm);
        $(elm).children('.user-container').addClass('chain chain-ttd');
    }
    else {
        rtl(elm);
        $(elm).children('.user-container').addClass('chain chain-rtl');
    }

});

$(window).on('resize', function() {
    console.log('Window re-sized.');
    // todo: funtcion to update when resize window...
});

});

4）演示 https://jsfiddle.net/jftqLf1d/1/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

重新排列tmux窗口

根据条件重新排列javascript数组

根据条件交替重新排列行？

根据标题重新排列列

根据页面重新排列按钮

根据特定值重新排列数组

PHP根据id重新排列数据

根据模式重新排列数据

根据给定的索引重新排列数组

根据字母重新排列列表项？

如何根据排列重新排列序列的组成部分？

使可点击的div标题重新排列以响应较小的宽度

很棒的WM：重新排列窗口而不更改布局

Python根据元素内容重新排列列表的顺序

根据条件重新排列字符串中的单词

根据ID名称重新排列div顺序

根据id重新排列php多维数组

根据嵌套数组重新排列对象数组

根据JSON数组重新排列HTML表格数据

根据分数重新排列列表项以适合功能曲线

根据字母顺序重新排列列数据

根据是否存在值并按整数重新排列数组

根据数量重新排列堆积条形图中的类别

根据公共键/值对重新排列对象数组

Java根据元素编号重新排列数组

根据映射规则重新排列Numpy向量

JavaScript：根据与x的绝对差重新排列数组元素

拆分数据并根据拆分号重新排列值

根据键重新排列列表而无需排序

TOP 榜单

  1. 1

    Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用

  2. 2

    使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中

  3. 3

    SQL Server中的非确定性数据类型

  4. 4

    Swift 2.1-对单个单元格使用UITableView

  5. 5

    如何避免每次重新编译所有文件？

  6. 6

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

  7. 7

    Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

  8. 8

    应用发明者仅从列表中选择一个随机项一次

  9. 9

    在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？

  10. 10

    HttpClient中的角度变化检测

  11. 11

    在Wagtail管理员中，如何禁用图像和文档的摘要项？

  12. 12

    如何了解DFT结果

  13. 13

    Camunda-根据分配的组过滤任务列表

  14. 14

    错误：找不到存根。请确保已调用spring-cloud-contract：convert

  15. 15

    为什么此后台线程中未处理的异常不会终止我的进程？

  16. 16

    构建类似于Jarvis的本地语言应用程序

  17. 17

    使用分隔符将成对相邻的数组元素相互连接

  18. 18

    您如何通过 Nativescript 中的 Fetch 发出发布请求？

  19. 19

    通过iwd从Linux系统上的命令行连接到wifi（适用于Linux的无线守护程序）

  20. 20

    使用React / Javascript在Wordpress API中通过ID获取选择的多个帖子/页面

  21. 21

    使用 text() 獲取特定文本節點的 XPath

热门标签

归档