社区首页 >专栏 ><jQury动态布局>浮动子元素均分布局对应的完整源码,以及jQuery在这里

<jQury动态布局>浮动子元素均分布局对应的完整源码,以及jQuery在这里

zhaoolee

发布于 2018-04-19 02:50:37

73400

代码可运行

文章被收录于专栏：木子昭的博客木子昭的博客

运行总次数：0

代码可运行

在前端页面的布局过程中,作者遇到了,这样一个问题当子元素为浮动元素时,父元素设置相应属性后可以被子元素撑开,但无法实现子元素的均分布局,在网络上找了半小时的资料,没有符合要求的布局示例, 今天自己用jQuery实现了动态计算子元素的margin,实现了子元素的均分布局,特来分享一下...

先上效果图

parent_son

源码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .clearfix:before, .clearfix:after{
            content: "";
            display: table;
        }

        .clearfix:after{

            clear:both;
        }

        /*适配非主流浏览器(IE浏览器)*/
        .clearfix{

            zoom:1;

        }

        .parent{

            width:100%;
            border-width: 1px;
            border-style: solid;
            border-color: #d29922;
            margin: 0 auto;
        }


        .son{

            width:  150px;
            height: 150px;
            border: 2px solid #509839;
            margin: 10px;
            float: left;
            text-align: center;
        }

    </style>

    <script src="js/jquery-1.12.4.min.js"></script>
    <script>

        $(function(){
            // 平均分布子级元素
            function ave_son_element() {
                // 动态获取父标签宽度
                var parent_width = $(".parent").width();
                $("#p_width").text(parent_width);
                // 获取子标签宽度
                var son_width = $(".son:first").outerWidth();
                $("#s_width").text(son_width);

                // 取余数
                var remainder = parent_width % son_width;
                // 取整数商
                var quotient = (parent_width-remainder) / son_width;
                $("#quotient").text(quotient);
                // 获取子元素左右margin值
                var margin_value = parseInt((parent_width - ((son_width)* quotient)) / (quotient*2));
                $("#margin_value").text(margin_value);

                // 设置子元素左侧margin
                $(".son").css("margin-left", margin_value);
                // 设置子元素右侧侧margin
                $(".son").css("margin-right", margin_value);

            }

            // 页面渲染时 平均分布 子级元素
            ave_son_element();

            $(window).resize(function () {
                // 父级 尺寸变化时, 平均分布子级元素

                ave_son_element()

            });

        })



    </script>

</head>
<body>

<div class="parent clearfix">

    <div class="son">君不见</div>
    <div class="son">黄河之水</div>
    <div class="son">天上来</div>
    <div class="son">奔流到海</div>
    <div class="son">不复回</div>
    <div class="son">高堂明悲白发</div>
    <div class="son">朝如青丝暮成雪</div>
    <div class="son">人生得意须尽欢</div>
    <div class="son">莫使金樽空对月</div>
</div>


<div>

    <span>父标签宽度:</span><span id="p_width"></span><br>
    <span>子标签宽度(包含border):</span><span id="s_width"></span><br>
    <span>单行子级标签个数为:</span><span id="quotient"></span><br>
    <span>子级标签左右的margin值为:</span><span id="margin_value"></span>

</div>

</body>
</html>