蛇形排序

最新推荐文章于 2024-04-13 15:12:17 发布

一叶知秋9307

最新推荐文章于 2024-04-13 15:12:17 发布

阅读量1.7k

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_40285497/article/details/94740599

版权

要实现如下

代码如下

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      font-size: 0;
    }
    ul:nth-child(2n-1){
      background-color: yellow;
    }
    ul:nth-child(2n){
      background-color: red;
      display: flex;
      justify-content: flex-end;
    }
    li{
      display: inline-block;
      width: 100px;
      height: 40px;
      line-height: 40px;
    }
    li>div{
      display: inline-block;
      font-size: 16px;
    }
    .pic{
      width: 60px;
    }
    .text{
      width: 40px;
      text-align: center;
    }
  </style>
</head>
<body>
<div id="zq">
  <ul>
    <li>
      <div class="text"></div>
      <div class="pic"></div>
    </li>
  </ul>
</div>
<script>
  function draw(n) {
    // 获取盒子宽度
    let boxW = document.querySelector('#zq').clientWidth;
    // 计算每行可以放几个li
    let items = Math.floor(boxW/100);
    // 计算需要几行
    let lines = Math.ceil(n/items);

    // js 拼接html字符串
    let html = '';
    for(let i=0;i<lines;i++){
      // 奇数行
      html += '<ul>'
      if(i%2==0){
        for(let j=0;j<items;j++){
          html += '<li><div class="text">'+(i*items+j+1)+'</div><div class="pic">图片</div></li>'
          if(i*items+j>n-2)break;
        }
      }
      // 偶数行
      else {
        for(let j=0;j<items;j++){
          if((i+1)*items-j<n+1){
            html += '<li><div class="pic">图片</div><div class="text">'+((i+1)*items-j)+'</div></li>'
          }
        }
      }
      html += '</ul>'
    }

    document.querySelector('#zq').innerHTML = html

  }
  draw(32)
</script>
</body>
</html>

增加一个flex 为主的

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      font-size: 0;
    }
    ul:nth-child(2n-1){
      background-color: yellow;
    }
    ul:nth-child(2n){
      background-color: red;
      display: flex;
      flex-direction: row-reverse;
    }
    li{
      display: inline-block;
      width: 100px;
      height: 40px;
      line-height: 40px;
    }
    li>div{
      display: inline-block;
      font-size: 16px;
    }
    .pic{
      width: 60px;
    }
    .text{
      width: 40px;
      text-align: center;
    }
  </style>
</head>
<body>
<div id="zq">
  <ul>
    <li>
      <div class="text"></div>
      <div class="pic"></div>
    </li>
  </ul>
</div>
<script>
  function draw(n) {
    // 获取盒子宽度
    let boxW = document.querySelector('#zq').clientWidth;
    // 计算每行可以放几个li
    let items = Math.floor(boxW/100);
    // 计算需要几行
    let lines = Math.ceil(n/items);

    // js 拼接html字符串
    let html = '';
    for(let i=0;i<lines;i++){
      // 奇数行
      html += '<ul>'
      for(let j=0;j<items;j++){
        if(i%2==0){
          html += '<li><div class="text">'+(i*items+j+1)+'</div><div class="pic">图片</div></li>'
        }else{
          html += '<li><div class="pic">图片</div><div class="text">'+(i*items+j+1)+'</div></li>'
        }
        if(i*items+j>n-2)break;
      }
      html += '</ul>'
    }

    document.querySelector('#zq').innerHTML = html

  }
  draw(32)
</script>
</body>
</html>

哈哈，这屁代码还来现丑

一叶知秋9307

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
蛇形排序

要实现如下代码如下<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale...
复制链接

扫一扫