Javascript 确定动态CSS3多列DIV Width的宽度固定列宽_Javascript_Jquery_Html_Css_Multiple Columns

Javascript 确定动态CSS3多列DIV Width的宽度固定列宽

javascript jquery html css

Javascript 确定动态CSS3多列DIV Width的宽度固定列宽,javascript,jquery,html,css,multiple-columns,Javascript,Jquery,Html,Css,Multiple Columns,我有一个DIV容器，里面装满了动态文本。文本的长度可以不同。DIV容器具有固定的高度，但没有宽度文本格式为CSS3多列文本宽度固定列宽结果是n列的宽度为column width。现在我想知道有多少列，或者如何计算DIV的width CSS代码： .columnize{ float: left; position: relative; width: 840px; overflow: hidden; } .columnize div{ -moz-colu

我有一个

DIV

容器，里面装满了动态文本。文本的长度可以不同。

DIV

容器具有固定的高度，但没有宽度

文本格式为CSS3多列文本宽度固定

列宽

结果是

列的宽度为

column width

。现在我想知道有多少列，或者如何计算

DIV

的

width

CSS代码：

.columnize{
    float: left;
    position: relative;
    width: 840px;
    overflow: hidden;
}
.columnize div{
    -moz-column-width: 259px;
    -webkit-column-width: 259px;
    -moz-column-gap: 16px;
    -webkit-column-gap: 16px;
    height: 560px;
}

HTML代码：

<div id="columnWrapper class="columnize">
    <div id="content">
    ... content goes here ...
    </div>
</div>

在除Firefox之外的所有浏览器中，这两种方法都返回

列宽，而不是真正的列宽
你知道如何获得列布局的宽度吗？
这对我很有用
您是否将js包装在$（document）.ready（）
？
中？以下是语法：
var div = document.getElementById(columnWrapper);               
var width = div.css("width"),
var height = div.css("height");

我在尝试使用css3列作为页面水平分页一篇文章时遇到了同样的问题。以下是我作为jQuery插件的解决方案：

想法如下：在列内容的末尾插入一个空白的
标记，并使用.position（）
抓住其相对于父容器的左侧位置，然后添加一个-webkit列宽
（因为.position（）
仅告诉您到
左侧坐标的距离
这里有一个小怪癖，我不明白。要获得正确的宽度，还必须减去一个-webkit列间距
。在我看来，.position（）.left
和容器边缘之间的距离应该只是最后一列的宽度，-webkit column width
。有人能解释这个吗？我只是数学不好吗
对不起，如果插件代码是草率的；我使用jQuery的经验有限：）
（应归功于：创意改编自。）
我也遇到了类似的问题，我必须得到要包含在
中的列的大小
分页机制
我分享代码，希望能对大家有用
这一想法归功于Rkabowski:-）


#上一页，#下一页，#信息页{
位置：固定；
宽度：50px；
高度：50px；
背景颜色：黄色；
利润率：10px；
}
#上{
顶部：600px；
左：0px；
}
#下一个{
顶部：600px；
左：60px；
}
#信息{
顶部：600px；
左：120px；
背景颜色：淡紫色；
}
.指南{
位置：固定；
顶部：0px；
左：0px；
宽度：1000px；
高度：500px；
-webkit框大小：边框框；
边框：20px纯红
}
#内容{
位置：固定；
顶部：0px；
左：0px；
宽度：1000px；
}
#内在的{
-webkit列数：2；
-webkit柱间隙：20px；
-webkit列宽：490px；
高度：500px；
}
var cntWidth，//内容总长度
areaWidth=1000，//可见区域
columnWidth=490，//1列减去间隙
pageTot，//总页数
pageCur=1，//活动页
间距=20，//列之间的间距
animDuration=400，/*jquery默认值400*/
contentPos=null；//内容左侧位置
函数renderInfoPage（）{
var elm=$（“#infopage”）；
html（'page'+pageCur+'of'+pageTot'）；
}
函数getPositionDom（）{
//保持内存中的dom位置
var elm=$（'内容'）；
var pos=elm.offset（）；
contentPos=pos.left；
}
//内容是否有jquery动画队列？
函数hasContentAnimateQueue（）{
var queueN=$（'#content'）.queue（）.length；
如果（队列！==0）{
返回true；
}否则{
返回false；
}
}
函数next（）{
如果（pageTot>0&&pageCur1）{
如果（！hasContentAnimateQueue（））{
var elm=$（'内容'）；
var newPos=内容位置+区域宽度+间隙；
contentPos=newPos；
//css（{left:newPos+'px'}）；//不使用动画
elm.animate（{左：newPos+'px'}，animDuration）；
pageCur--；
renderInfoPage（）；
}
}
}
函数start（）{
//添加事件侦听器
var elm=document.getElementById（'prev'）；
elm.addEventListener（'click'，prev）；
elm=document.getElementById（'next'）；
elm.addEventListener（“单击”，下一步）；
//诀窍：在滚动的末尾添加一个跨距，获取它的位置，以了解滚动的总时间
var div = document.getElementById(columnWrapper);               
var width = div.css("width"),
var height = div.css("height");

<!--
        Horizontal sliding carousel with multi columns.
-->

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <style>
            #prev,  #next, #infopage {
                position: fixed;
                width: 50px;
                height: 50px;
                background-color: yellow;
                margin: 10px;
            }
            #prev  {
                top: 600px;
                left: 0px;
            }
            #next  {
                top: 600px;
                left: 60px;
            }
            #infopage  {
                top: 600px;
                left: 120px;
                background-color: lavender;
            }
            .guide {
                position: fixed;
                top: 0px;
                left: 0px;
                width: 1000px;
                height: 500px;
                -webkit-box-sizing: border-box;
                border: 20px solid red
            }
            #content {
                position: fixed;
                top: 0px;
                left: 0px;  
                width: 1000px;
            }
            #inner {
                -webkit-column-count: 2;
                -webkit-column-gap: 20px;
                -webkit-column-width: 490px;
                height: 500px; 
            }
        </style>
        <script>

            var cntWidth, // content total length
                areaWidth = 1000, // visible area
                columnWidth = 490, // 1 columns minus gap
                pageTot, // total number of pages
                pageCur = 1, // active page
                gap = 20, // space between columns
                animDuration = 400, /* jquery default 400 */
                contentPos = null; // content left position

            function renderInfoPage() {
                var elm = $('#infopage');
                elm.html('page ' + pageCur + ' of ' + pageTot);
            }

            function getPositionDom() {
                // keep in memory dom position
                var elm = $('#content');
                var pos = elm.offset();
                contentPos = pos.left;
            }

            // has content a jquery animation queue?
            function hasContentAnimateQueue() {
                var queueN = $('#content').queue().length;
                if (queueN !== 0) {
                    return true;
                } else {
                    return false;
                }
            }

            function next() {
                if (pageTot > 0 && pageCur < pageTot) {
                    if (!hasContentAnimateQueue()) {
                        var elm = $('#content');
                        var newPos = contentPos - areaWidth - gap;
                        contentPos = newPos;
                        elm.animate({left: newPos + 'px'}, animDuration);
                        pageCur++;
                        renderInfoPage();
                    }
                }
            }
            function prev() {
                if (pageCur > 1) {
                    if (!hasContentAnimateQueue()) {
                        var elm = $('#content');
                        var newPos = contentPos + areaWidth + gap;
                        contentPos = newPos;
                        //elm.css({left: newPos + 'px'}); // use this for no animation
                        elm.animate({left: newPos + 'px'}, animDuration);
                        pageCur--;
                        renderInfoPage();
                    }
                }
            }
            function start() {
                // add event listeners
                var elm = document.getElementById('prev');
                elm.addEventListener('click', prev);
                elm = document.getElementById('next');
                elm.addEventListener('click', next);

                // trick: add a span at the end of the scrolling, get its position so to find out total how long was were columns 
                var elmSpan = $('#inner').append('<span></span>');                
                var posSpan = $('#inner').find('span:last-of-type').position().left;  

                // add the width of the final column
                //posSpan += parseInt($('#inner').css('-webkit-column-width'), 10);
                posSpan += columnWidth;

                // subtract one column gap (not sure why this is necessary?)
                //pos -= parseInt($('#inner').css('-webkit-column-gap'),10);
                posSpan -= gap;

                // remove empty <span>
                $('#inner').find('span:last-of-type').remove();

                cntWidth = posSpan; // the total clumns width!

                var result = cntWidth  / areaWidth;
                if (result <= 1) {
                    pageTot = 1; // in case of content wich is wihtin the first page
                } else {
                    pageTot = Math.ceil(cntWidth / areaWidth);
                }
                // first time
                renderInfoPage();
                getPositionDom();
            }

        </script>
    </head>
    <body onload="start()">
        <div class="guide"></div>
        <div id="content"><div id="inner">
                <figure>
                    <img src="http://www.w3schools.com/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
                    <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by Richard Clark</figcaption>
                </figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper mi velit, sit amet elementum libero ultrices sed. Praesent ut fermentum neque. Etiam mauris sem, placerat ac feugiat a, pulvinar sed nulla. Nam id augue erat. Sed a neque commodo, fringilla magna a, sollicitudin nisl. Sed tellus nisi, pretium id turpis id, venenatis hendrerit lectus. Maecenas mauris enim, pulvinar a porttitor eu, volutpat sit amet magna. Sed sit amet orci libero. Pellentesque eu elit sit amet felis lacinia convallis. Cras vel dui egestas, vehicula nulla nec, commodo quam. Pellentesque ligula leo, lobortis vitae eros in, pulvinar ornare elit. Suspendisse augue tortor, imperdiet ut ipsum id, pulvinar rhoncus odio.
</p>
<p>
Quisque in neque tempus, consectetur erat at, eleifend diam. Aenean bibendum sollicitudin velit, non dignissim eros tristique vel. Ut a risus vitae quam lobortis suscipit ut eget ipsum. Maecenas quis lorem non enim condimentum dictum vel sed augue. Curabitur scelerisque ut lorem ac fringilla. Suspendisse a condimentum eros. Phasellus luctus ipsum non arcu eleifend consequat ac ut massa. Nunc sed tortor sed orci viverra luctus. Mauris rutrum quam id velit aliquet, sed vestibulum erat dictum. Donec adipiscing mauris at nunc interdum auctor. Sed venenatis dictum justo, in condimentum orci interdum id. Curabitur id dignissim mi. Praesent blandit ac eros in faucibus. Ut commodo euismod massa, quis aliquam tortor euismod volutpat. Suspendisse vehicula nulla in adipiscing vehicula. Vivamus dapibus tempus justo, sit amet suscipit ante.
</p>
<p>
Integer mauris turpis, pharetra feugiat nisi ac, mattis consectetur urna. Praesent condimentum venenatis lectus et aliquet. Maecenas id nunc quis augue eleifend fermentum molestie lacinia tellus. Pellentesque eleifend urna quis dui pretium feugiat. Nullam non quam nulla. Nulla in libero at turpis elementum sollicitudin non a justo. Nullam a arcu elementum, placerat elit in, posuere odio. Nam nisl ipsum, pretium vitae varius vitae, tempus non ligula.
</p>
<p>
Fusce at ullamcorper nibh. Nam quis sapien malesuada, porttitor lorem vel, dapibus mi. Ut lobortis tellus ut ultrices eleifend. Sed nec orci quis arcu pretium dictum. In nunc elit, ultricies in volutpat in, elementum eget lectus. Sed nec urna laoreet, bibendum odio quis, tincidunt lectus. Donec sagittis ultricies libero, et mollis magna.
</p>
<p>
Integer nisl urna, aliquam at dignissim id, vestibulum at tortor. Quisque aliquet risus eget augue ullamcorper, sit amet porttitor tellus vulputate. Vestibulum nisl sapien, malesuada quis mauris eu, fermentum egestas nisl. Maecenas scelerisque, eros in rutrum molestie, dui nibh fermentum sem, nec ultrices odio nisl et velit. Nunc a tincidunt nunc. Suspendisse potenti. Vestibulum in leo consequat, fringilla justo eu, rhoncus nibh. Praesent at justo sapien. Proin et tellus molestie, aliquam tellus at, imperdiet sapien. Proin id ante eget felis congue lobortis a ut lectus.
</p>

<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque lacinia massa nec enim cursus, ac malesuada nibh dignissim. Nullam vel purus feugiat nulla sollicitudin molestie. Vivamus vel nisi ante. Vestibulum at dui dignissim, volutpat dui id, egestas dolor. Nullam ullamcorper mi vitae facilisis dapibus. Suspendisse id auctor lorem. Donec facilisis pulvinar ligula, a porta risus ultrices ac. Integer enim odio, interdum id pharetra non, adipiscing ac velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec felis tortor, tempus at rhoncus eu, tempor id dui. Sed ultricies sem nec ante luctus, in facilisis quam tempus. Aliquam mollis sollicitudin risus non mattis. Nunc semper viverra diam eu volutpat. Sed id neque scelerisque, vehicula libero nec, pulvinar eros. Donec nec nisi eu lectus cursus dapibus.
</p>   
<p> 
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero commodo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p> 
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero commodo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p> 
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero commodo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p> 
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero commodo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p> 
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero commodo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p> 
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero commodo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p> 
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero commodo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p> 
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero commodo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
<p> 
Vestibulum porta rhoncus nulla sed feugiat. Suspendisse sollicitudin auctor tellus sit amet sollicitudin. Integer feugiat vehicula urna ut malesuada. Mauris leo risus, tempor id fermentum vel, ornare quis risus. Nullam vel dolor ac metus ullamcorper interdum ac ut nibh. Nunc sit amet tellus sit amet libero commodo ultricies. Maecenas posuere mauris laoreet enim tristique lacinia. Etiam eget congue velit.
</p>
</div></div>
        <div id="prev">PREV</div>
        <div id="next">NEXT</div>
        <div id="infopage"></div>
    </body>
</html>