JavaScript之根据所选排列方式进行排列

于 2021-04-27 19:10:43 发布
阅读量194 收藏
点赞数 1
分类专栏： HTML JS 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_50481455/article/details/116207845
版权
本文介绍了JavaScript如何根据用户选择的排列方式实现动态布局。内容包括两种方法：一种是基础的排列方式，另一种利用绝对定位进行复杂的位置排列。示例展示了默认的单行排列以及可切换的三列或四列排列模式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

JavaScript之根据所选排列方式进行排列

有两种方式，第一种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九宫格布局</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #wrap{
            overflow: hidden;
        }
        #wrap .item{
            width: 248px;
            height: 434px;
            font-size: 13px;
            border: 1px solid gray;
        }
        #wrap .item .title{
            width: 248px;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        .imgContainer{
            width: 248px;
            display: table-cell;
            text-align: center;
        }
        .imgContainer img{
            width: 248px;
            height: 360px;
        }
        #wrap .item .price{
            color: #ff6700;
            font-size: 18px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="cols">
        <button>3列</button>
        <button>4列</button>
        <button>5列</button>
    </div>
    <div id="wrap">
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt1.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt2.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt3.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt4.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt5.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt6.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt7.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt8.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt9.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt10.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt11.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
    </div>
    <script type="text/javascript">
        // 获取标签
        var btns = document.getElementsByTagName("button");
        var items = document.getElementsByClassName("item");

        function cols(Num){
            // 循环
            for (var i=0;i<items.length;i++){
                items[i].parentNode.style.width = (Num * items[i].offsetWidth) + "px";
                items[i].style.float = "left";
            }
        }

        // 监听按钮的点击
        btns[0].onclick = function (){
            cols(3);
        }
        btns[1].onclick = function (){
            cols(4);
        }
        btns[2].onclick = function (){
            cols(5);
        }
    </script>
</body>
</html>

第二种，第二种设定了绝对定位进行位置排列：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九宫格布局定位</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #wrap{
            position: relative;
        }
        #wrap .item{
            width: 248px;
            height: 434px;
            font-size: 13px;
            border: 1px solid gray;
        }
        #wrap .item .title{
            width: 248px;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        .imgContainer{
            width: 248px;
            display: table-cell;
            text-align: center;
        }
        .imgContainer img{
            width: 248px;
            height: 360px;
        }
        #wrap .item .price{
            color: #ff6700;
            font-size: 18px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="cols">
        <button>3列</button>
        <button>4列</button>
        <button>5列</button>
    </div>
    <div id="wrap">
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt1.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt2.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt3.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt4.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt5.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt6.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt7.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt8.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt9.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt10.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="img/skirt11.jpg" alt="">
            </div>
            <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
            <p class="price">￥69</p>
        </div>
    </div>
    <script type="text/javascript">
        // 获取标签
        var btns = document.getElementsByTagName("button");
        var items = document.getElementsByClassName("item");

        function cols(Num){
            // 求得每个盒子占行数和列数
            for (var i=0;i<items.length;i++){
                var row = parseInt(i / Num);
                var col = parseInt(i % Num);
                // 设置盒子定位
                items[i].style.position = "absolute";
                items[i].style.top = (row * items[i].offsetHeight) + "px";
                items[i].style.left = (col * items[i].offsetWidth) + "px";
            }
        }

        // 监听按钮的点击
        btns[0].onclick = function (){
            cols(3);
        }
        btns[1].onclick = function (){
            cols(4);
        }
        btns[2].onclick = function (){
            cols(5);
        }
    </script>
</body>
</html>

实现效果如下：
默认为单行排列：
在这里插入图片描述
可以选择三列或者四列进行排列：
在这里插入图片描述
觉得有用的话可以给作者鼓励支持一下~你的鼓励就是我不断前行的动力！

评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值