问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

多个不固定高度的div 自适应排版问题

头像
mikechen
    1.1k10167305

    图片描述

    RT 问题代码化一下 就是
    var arr = [120,97,120,138,97];//所有div 的高度列表
    var len = $('div').length //div 的个数
    var len_row = 行宽/div宽度 //3 这个我能计算出来

    现在的问题 就是 如何把数组 每隔len_row 个切割一次 拿到最大值,然后赋值给每行的div 高度

    csshtmljavascript
    阅读 3.9k
    5 个回答
    得票最新
    头像
    止醉
      7711620

      我感觉你应该固定一个高度，超出就用省略号表示并折叠，加个‘显示全部’按钮，从交互和代码维护方面都更好一些，你这么写太累了，你可以先获取每行第一个高度，在动态改每行剩下的，但是这样我担心用户会看见repaints

      头像
      小皇帝James
        6001828

        display:inline-block
        图片描述

        头像
        安于现状i
          8791410

          瀑布流？？

          头像
          王能全是谁
            1.1k1614

            是这种效果吗图片描述

            <div class="box">
  <div class="col">
    <div class="item">
      姓名:hohn
      <br />
      email:23131@231.org
      <br />
      测试段落高度不确定
    </div>
  </div>
</div>
            var arr=[],arr2=[],len=$('.box .item').length;
$('.box .item').each(function(index) {
    arr.push($(this).height());
    arr2.push($(this));
      if((index+1)%3==0||index+1==len) {
        var hmax=arr.sort(function(a,b){
              if (a<b) {
                return 1
              } else if (a>b) {
                return -1
              } else {
                return 0
              }    
        });
        arr2.forEach(function(v) {
          $(v).height(hmax[0]);
        });
        arr.length=arr2.length=0;
      }
});
            头像
            樊思雨
              30221536
              <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .item {
            width: 32%;
            border: 1px solid #333;
            display: table-cell;
        }
        
        .col {
            width: 100%;
            display: table;
            border-collapse: separate;
            border-spacing: 5px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="col">
            <div class="item">
                姓名:hohn
                <br /> email:23131@231.org
                <br /> 测试段落高度不确定
            </div>
            <div class="item">
                姓名:hohn
                <br /> email:23131@231.org
                <br /> 测试段落高度不确定
                <br /> 测试段落高度不确定<br /> 测试段落高度不确定<br /> 测试段落高度不确定<br /> 测试段落高度不确定<br /> 测试段落高度不确定<br /> 测试段落高度不确定<br /> 测试段落高度不确定<br /> 测试段落高度不确定
            </div>
            <div class="item">
                姓名:hohn
                <br /> email:23131@231.org
                <br /> 测试段落高度不确定<br /> 测试段落高度不确定<br /> 测试段落高度不确定
            </div>
        </div>

        <div class="col">
            <div class="item">
                姓名:hohn
                <br /> email:23131@231.org
                <br /> 测试段落高度不确定<br /> 测试段落高度不确定
                <br /> 测试段落高度不确定<br /> 测试段落高度不确定<br /> 测试段落高度不确定<br /> 测试段落高度不确定<br /> 测试段落高度不确定<br /> 测试段落高度不确定<br /> 测试段落高度不确定<br /> 测试段落高度不确定
            </div>
            <div class="item">
                姓名:hohn
                <br /> email:23131@231.org

            </div>
            <div class="item">
                姓名:hohn
                <br /> email:23131@231.org
                <br /> 测试段落高度不确定
            </div>
        </div>

    </div>
</body>

</html>

              在 王能全是谁 的架构下改的，用css。不用js

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题