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

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

对应的完整源码,以及jQuery在这里

http://www.jianshu.com/p/4f28e1ae08b1

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android小菜鸡

自定义View学习之路(二)————Paint与Canvas

  Canvas可以理解为画布,配置好画笔后,我们可以调用Canvas的各种绘制方法。   绘制直线:canvas.drawLine(float startX...

891
来自专栏CaiRui

CSS再学

css的注释 /*.......*/ 直接在html代码中写css <p style="color: rebeccapurple;font-size: 18px...

1797
来自专栏性能与架构

CSS选择器是如何确定优先级的?

先看下面的示例 <div id="content"> <p id="title">Hello world</p> </div> 有如下的2个css选择器...

29310
来自专栏三木的博客

CSS概要

CSS 基础知识 语法 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式, 如文字...

1925
来自专栏IMWeb前端团队

Canvas实现progress效果

据说本贵族圈每月不分享就邀请雪糕。。。所以分享下一个简单的Canvas插件   Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像,你可以使用j...

2277
来自专栏菜鸟计划

CSS布局(三) 布局模型

布局模型 在网页中,元素有三种布局模型: 1、流动模型(Flow) 默认的 2、浮动模型 (Float) 3、层模型(Layer) 1、流动模型(Flow) ...

3136
来自专栏Nian糕的私人厨房

CSS 基础

层叠样式表 (Cascading Style Sheets),一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语...

1114
来自专栏欧阳大哥的轮子

iOS界面布局的核心以及TangramKit介绍

TangramKit是iOS系统下用Swift编写的第三方界面布局框架。他集成了iOS的AutoLayout和SizeClass以及Android的五大容器布局...

1243
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(七)多列布局,伸缩布局

CSS3中新出现的多列布局 (multi-column) 是传统 HTML 网页中块状布局模式的有力扩充。

2121
来自专栏抠抠空间

css属性详解

一、字体属性 字体   font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识...

2959

扫码关注云+社区