前端开发图片的瀑布流布局

手机前端的开发
手机端前端开发
手机web前端开发案例

图片设置等宽,高度自适应,填充图片的数据是模拟的后台数据(请全屏预览)

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″ />
    <title>瀑布流布局</title>
    <!– <link rel=”stylesheet” type=”text/css” href=”css/style.css”/> –>
    <style>
        *{
margin:0;
padding:0;
}
#main{
position:relative;
}
.box{
padding:15px0015px;
float:left;
}
.pic{
padding:10px;
border:1pxsolid#ccc;
border-radius:5px ;
box-shadow:005px#ccc;
}
.picimg{
width:365px;
height:auto;
}
</style>
</head>
<body>
    <div id=”main”>
        <div class=”box”>
            <div class=”pic”>
                <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201608/12/133437jl189kfuzh2f7k4i.jpg” />
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201608/12/133436kmfmx5mxdq5522nz.jpg” />
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201608/12/133436ayjlzt0oyhn907cg.jpg” />
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201608/12/133435crrozr54rrye0zg5.jpg” />
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201608/12/133434wx8gkf8gkckqg6xg.jpg” />
            </div>
        </div>
        <div class=”box”>
            <div class=”pic”>
                <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201608/12/133433i644dofbyvbyyfio.jpg” />
            </div>
        </div>
    </div>
    <script type=”text/javascript” charset=”utf-8″>
        window.onload = function () {
            waterfall(‘main’, ‘box’);
            var dataInt = {
                ‘data’: [{ ‘src’: ‘133437jl189kfuzh2f7k4i.jpg’ },
                { ‘src’: ‘133436kmfmx5mxdq5522nz.jpg’ },
                { ‘src’: ‘133436ayjlzt0oyhn907cg.jpg’ },
                { ‘src’: ‘133435crrozr54rrye0zg5.jpg’ },
                { ‘src’: ‘133434wx8gkf8gkckqg6xg.jpg’ },
                { ‘src’: ‘133433i644dofbyvbyyfio.jpg’ },
                { ‘src’: ‘133432zrtbnbgbrbyfkmlg.jpg’ },
                { ‘src’: ‘133432fk5wffs2f5twfhws.jpg’ },
                { ‘src’: ‘133432rcc1n3nkccnichs8.jpg’ },
                { ‘src’: ‘133430ahdyyx9cxpccbhpc.jpg’ },
                { ‘src’: ‘133430qunng4ar4xqyd29y.jpg’ },
                { ‘src’: ‘133428oh2jbvq5n5duuqhn.jpg’ },
                { ‘src’: ‘133426s1j23im1bso0sbsm.jpg’ },
                { ‘src’: ‘133426y2blql21lq9tnb1l.jpg’ },
                { ‘src’: ‘133426v8r3v2033v7drxua.jpg’ },
                { ‘src’: ‘134228q0p928ugxbv7xxxx.jpg’ },
                { ‘src’: ‘133426hrc5y5awp1aywvla.jpg’ },
                { ‘src’: ‘133426aoib8bu1az8zhfk9.jpg’ }]
            };
            window.onscroll = function () {
                if (checkscrollside()) {
                    var oParent = document.getElementById(‘main’);
                    for (var i = 0; i < dataInt.data.length; i++) {
                        var oBox = document.createElement(‘div’);
                        oBox.className = ‘box’;
                        oParent.appendChild(oBox);
                        var oPic = document.createElement(‘div’);
                        oPic.className = ‘pic’;
                        oBox.appendChild(oPic);
                        var oImg = document.createElement(‘img’);
                        oImg.src = “http://cdn.attach.w3cfuns.com/notes/pics/201608/12/” + dataInt.data[i].src;
                        oPic.appendChild(oImg);
                    }
                    waterfall(‘main’, ‘box’);
                }
                // checkscrollside();
            }
        }
        function waterfall(parent, box) {
            //遍历所有的盒子
            var oParent = document.getElementById(parent);
            var oBox = getByClass(oParent, box);
            // console.log(oBox.length);
            //计算整个页面的列数
            var oBoxW = oBox[0].offsetWidth;
            // console.log(oBoxW);
            var cols = Math.floor(document.documentElement.clientWidth / oBoxW);
            // console.log(cols);
            //设置main的宽度
            oParent.style.cssText = ‘width: ‘ + oBoxW * cols + ‘px;margin: 0 auto’
            var hArr = [];//存放每一行高度
            for (var i = 0; i < oBox.length; i++) {
                if (i < cols) {
                    hArr.push(oBox[i].offsetHeight);
                    // console.log(hArr);
                } else {
                    var minH = Math.min.apply(null, hArr);
                    // console.log(minH);
                    var index = getminHIndex(hArr, minH);
                    // console.log(i);
                    oBox[i].style.position = ‘absolute’;
                    oBox[i].style.top = minH + ‘px’;
                    oBox[i].style.left = oBoxW * index + ‘px’;
                    hArr[index] += oBox[i].offsetHeight;
                }
            }
        }
        function getByClass(parent, classname) {
            var boxArr = [],//存储所有class为box的元素
                oElements = parent.getElementsByTagName(‘*’);
            for (var i = 0; i < oElements.length; i++) {
                if (oElements[i].className == classname) {
                    boxArr.push(oElements[i]);
                }
            }
            return boxArr;
        }
        function getminHIndex(arr, val) {
            for (var i in arr) {
                if (arr[i] == val) {
                    return i;
                }
            }
        }
        function checkscrollside() {
            var oParent = document.getElementById(‘main’);
            var oBox = getByClass(oParent, ‘box’);
            var lastBoxH = oBox[oBox.length – 1].offsetTop + Math.floor(oBox[oBox.length – 1].offsetHeight / 5);
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            // console.log(scrollTop);
            var height = document.body.clientHeight || document.documentElement.clientHeight;
            return (lastBoxH < scrollTop + height) ? true : false;
        }
    </script>
</body>
</html>
手机客户端前端开发
前端开发兼容华为手机类型
前端手机端开发曲屏
» 本文来自:前端开发者 » 《前端开发图片的瀑布流布局》
» 本文链接地址:https://www.rokub.com/6273.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!