html5 - CSS如何实现这样的布局?
巴扎黑
巴扎黑 2017-04-17 13:23:44
[HTML讨论组]
巴扎黑
巴扎黑

全部回复(4)
怪我咯

可以用flex-box


#container { 
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: column wrap;
  height: 4em;
  width: 3.6em;
}

.same_width {
  background-color:#E91E63; 
  width: 1em; 
  margin: 0.1em; 
}

#a {height:1em}
#b {height:2em}
#c {height:3em}
#d {height:4em}
#e {height:2em}
#f {height:1em}
#g {height:2em}
<p id="container">
  <p id="a" class="same_width">
  </p>
  <p id="b" class="same_width">
  </p>
  <p id="c" class="same_width">
  </p>
  <p id="d" class="same_width">
  </p>
  <p id="e" class="same_width">
  </p>
  <p id="f" class="same_width">
  </p>
  <p id="g" class="same_width">
  </p>
</p>

效果:

阿神

纯css貌似做不到...
用js的实现方法有几种,

  1. 用css+p写4列, 然后用js按顺序先将每列填充1个, 从第五个开始, 计算出高度最小的列, 往里面填充第五个, 按第五个的规则, 一直循环到最后一个

  2. 用绝对定位, 用js计算每个的top和left

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        li {
            width: 20%;
            float: left;
        }

        li + li {
            border-left: 1px solid red;
        }

        p { margin-bottom: 10px; text-align: center;}
    </style>
</head>

<body>
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var list = document.querySelector('#list').querySelectorAll('li');
        for (var i = 0; i <= 50; i++) {
            var j = i % 4;
            list[j].insertAdjacentHTML('beforeEnd', '<p>' + i + '</p>');
        }
    </script>
</body>

</html>
黄舟

建议采用插件写吧,快捷,方便,网上有很多瀑布流的插件,你去看看。

阿神

这是瀑布流布局,纯css实现起来很困难,应该要配合js实现,建议谷歌瀑布流,即可找到答案。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号