简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 关于使用JS做定位式流动布局的问题，求大神帮帮看一下，谢谢哈
PHP中文网
PHP中文网 2017-04-10 17:44:10
0
1
402

我正在看教程是用JS实现通过定位的方式来使现流动式布局的，我跟据教程写的代码始中不对，求大神帮看一下我哪里写了。谢谢哈。在原教程中，是将获取图片那里改为给生成的p加上随机的高度才实现的，用获取图片的方式没有成。想请大神帮看一下，为什么使用获取图片的方式不能实现定位式流动布局呀。谢谢哈。我默认设置了8张宽度相同，高度不图的图片。

代码如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>00015定位式流动布局</title>
        <style>
            * {
                padding: 0px;
                margin: 0px;
            }
            
            #Box {
                height: 500px;
                position: relative;
            }
            
            .xdsss {
                margin-top: 10px;
            }
        </style>
        <script>
        //获取最小索引值
            function cherkHerigt(op_xiaoBox_ge) {
                var ch_height = 0000000;
                var index = 0;
                for(var i = 0; i < op_xiaoBox_ge.length; i++) {
                    var height_a = op_xiaoBox_ge[i].offsetHeight;
                    if(op_xiaoBox_ge < ch_height) {
                        ch_height = height_a;
                        index = i;
                    };
                };
                return index;
            };

            //
            window.onload = function() {
                var op = document.getElementById('Box');
                var op_xiaoBox = op.getElementsByTagName('p');
                var Vw = document.documentElement.clientWidth;
                var Vh = document.documentElement.clientHeight;

                var op_xiaoBox_width = 280 + 10; //p盒子的固定宽度+边距
                var op_xiaoBox_num = Math.floor(Vw / op_xiaoBox_width); //Math.floor();向下取整

                var k = Vw - op_xiaoBox_width * op_xiaoBox_num; //浏览器的宽度减p盒子的宽度剩盒子个数=Box剩作宽度
                //alert(k);
                /*
                 function xdf(obj){
                    obj.className = "xdsss";
                }
                **/
                op.style.width = op_xiaoBox_width * op_xiaoBox_num + "px";//op的总宽度
                op.style.background = "darkred";
                op.style.margin = "0 auto"; //op盒子居中显示

                //初始一个数组/数组对应op_xiaoBox_width的个数
                var op_xiaoBox_ge = [0, 0, 0, 0];
                
                //循环在op里创建p图片容器
                for(var i = 1; i < 8; i++) {
                    var oImg = document.createElement('img');
                    oImg.src = "img/" + i + ".png";
                    //
                    var op_changjian = document.createElement('p');
                    op_changjian.style.top = op_xiaoBox_ge[min_index] + "px";
                    op_changjian.style.left = min_index * op_xiaoBox_width + "px";
                    
                    op_changjian.appendChild(oImg);
                    
                    //得到返回的索引值
                    var min_index = cherkHerigt(op_xiaoBox_ge);
                    
                    //alert(min_index);
                    op.appendChild(op_changjian);
                    
                }
            }
        </script>
    </head>

    <body>
        <p id="Box">

        </p>
    </body>

</html>
PHP中文网
PHP中文网

认证高级PHP讲师

reply all(1)
大家讲道理
大家讲道理2017-04-10 17:46:10 1 floor

因为浏览器在布局的时候图片还未加载完成，因此是不能撑开p的。要实现瀑布流还是需要设法先获取图片高度。

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！