根据窗口宽度重新排列链

凯恩·维亚纳

解决:我得到了@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 条评论
登录 后参与评论

相关文章

来自分类Dev

PHP根据id重新排列数据

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Java

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

根据文本内容重新排列DOM元素

来自分类Dev

根据给定的标准重新排列DOM元素

来自分类Dev

R:根据排名重新排列数据框的列

来自分类Dev

根据值重新排列数组数据并更新键名称

来自分类Dev

根据每个对象的ID重新排列数组

来自分类Dev

如何根据特定索引重新排列嵌套列表

来自分类Dev

熊猫写到Excel根据字母顺序重新排列列

来自分类Dev

如何根据一组步骤重新排列列表?

来自分类Dev

根据先前列的覆盖范围重新排列列

来自分类Dev

性能问题-根据列标题重新排列列

来自分类Dev

r:根据时间重新排列数据帧

来自分类Dev

根据名称列表重新排列DataFrame列

来自分类Java

重新排列读取

来自分类Dev

根据重新排列的重复片段(或如何删除重新排列的重复片段)切片熊猫数据框

来自分类Dev

重新排列SASS智能

来自分类Dev

重新排列HTML表格

来自分类Dev

SQL重新排列行

来自分类Java

交替重新排列阵列

TOP 榜单

热门标签

归档