<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 条评论
登录 后参与评论

相关文章

来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native布局详细指南

本文出自《React Native学习笔记》系列文章。 一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox...

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

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

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

27910
来自专栏三木的博客

CSS概要

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

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

CSS 基础

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

13340
来自专栏cnblogs

Css3新特性总结之边框与背景(一)

本系列主要总结Css3一些新特性的认识,来源于《css揭秘》书。 一、半透明边框 css3最好用hsla,而不是rgba,hsla是:h:颜色值(0~360);...

18980
来自专栏进击的君君的前端之路

CSS常见样式(一)

32730
来自专栏cnblogs

BOOtstrap源码分析之 tooltip、popover

一、tooltip(提示框) 源码文件: Tooltip.js Tooltip.scss 实现原理: 1、获取当前要显示tooltip的元素的定位信息(top...

34160
来自专栏菜鸟计划

CSS布局(三) 布局模型

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

35060
来自专栏上善若水

018android初级篇之自定义圆形进度条

项目需要,需要一个圆形的进度条,所想到的实现方案是这样的: 自定义View,订制一个圆形的进度条。下面简述实现,有不当之处敬请指正。

13350
来自专栏IMWeb前端团队

Canvas实现progress效果

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

27670

扫码关注云+社区

领取腾讯云代金券