手机端两列图片瀑布流
效果展示：
waterfall.view.html：
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link type="text/css" rel="stylesheet" href="../css/mui.min.css" /> <link type="text/css" rel="stylesheet" href="../css/waterfall.view.css" /> </head> <body> <!-- <header class="mui-bar mui-bar-nav" style="background: #ffffff; box-shadow: none;"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">两列图片瀑布流</h1> </header> --> <div class="mui-content mui-scroll-wrapper"> <div class="mui-scroll imgs-box" init="true"> <div class="two-ranked-box"> <ul class="box-left"></ul> <ul class="box-right"></ul> </div> </div> </div> </body> <script type="text/javascript" src="../js/mui.min.js"></script> <script type="text/javascript"> mui.init(); //模拟瀑布流JSON数据 var waterfallData = [ { id: "img1", name: '蝴蝶', details: '蝴蝶蝴蝶蝴蝶', src: '../images/waterfall/butterfly.jpg' }, { id: "img2", name: '锦鸡', details: '锦鸡锦鸡', src: '../images/waterfall/bird.jpg' }, { id: "img3", name: '罕见麻雀', details: '罕见麻雀罕见麻雀罕见麻雀', src: '../images/waterfall/animal3.jpg' }, { id: "img4", name: '白鹤', details: '白鹤白鹤白鹤', src: '../images/waterfall/crane.jpg' }, { id: "img5", name: '柴犬', details: '柴犬', src: '../images/waterfall/dog.jpg' }, { id: "img6", name: '长颈鹿', details: '长颈鹿', src: '../images/waterfall/giraffe.jpg' }, { id: "img7", name: '猎豹', details: '猎豹', src: '../images/waterfall/leopard.jpg' }, { id: "img8", name: '大熊猫', details: '大熊猫', src: '../images/waterfall/panda.jpg' }, { id: "img9", name: '兔子狗', details: '兔子狗兔子狗', src: '../images/waterfall/pika.jpg' }, { id: "img0", name: '北极熊', details: '北极熊', src: '../images/waterfall/polar-bear.jpg' }, { id: "img10", name: '狐猴', details: '狐猴', src: '../images/waterfall/raccoon.jpg' } ] renderImages(document.querySelector('.mui-scroll.imgs-box'), waterfallData); mui(".mui-scroll-wrapper").scroll(); /** * 渲染瀑布流图片 * @param {Object} ele 瀑布流所在容器的dom元素 * @param {Object} data 瀑布流图片数据 */ function renderImages(ele, data) { var i = 0 var init = ele.getAttribute('init') if ('true' == init) { ele.querySelector('.box-left').innerHTML = ''; ele.querySelector('.box-right').innerHTML = ''; } //模拟数据导入 loadNext(); function loadNext() { var boxLeft = ele.querySelector('.box-left') var boxRight = ele.querySelector('.box-right') var html = '<li class="img-item" onclick="toImgInfo(\'' + data[i].id + '\')">' + '<p class="product-picture"><img src="' + data[i].src + '"></p>' + '<p class="product-np">' + data[i].name + '</p>' // + '<p class="product-ie">' + data[i].details + '</p>' + '</li>'; if (boxLeft.scrollHeight < boxRight.scrollHeight) { boxLeft.innerHTML += html } else { boxRight.innerHTML += html } // 使用一定时间间隔再加载下一张 保证两列瀑布流图片分布一致 // 尽量避免使用for循环直接渲染 除非网络状况十分十分的好或只是加载本地图片 否则会出现一边空白一边加载了很多张的情况 var interval = setInterval(function() { i++; if (i < data.length) { loadNext(); } else { clearInterval(interval) } }, 150); // 这是延时时间根据实际网络状况调整 当然是越小越好，代表网络越好 } } </script> </html>
waterfall.view.css:
*{ margin: 0; padding: 0; list-style: none; font-style: normal; font-family: PingFangSC-Regular, PingFang SC; } .two-ranked-box { margin: 6px 8px; overflow: hidden; padding-bottom: 25px; } .two-ranked-box ul { width: 49%; float: left; } .two-ranked-box ul:last-child { margin-left: 2%; } .two-ranked-box ul li { margin-bottom: 8px; padding: 5px 5px 1px 5px; background-color: #FFFFFF; } .two-ranked-box ul li p:first-child { padding-top: 0; } .two-ranked-box ul li p { color: #7C7D7C; font-size: 12px; overflow: hidden; line-height: 15px; white-space: nowrap; text-overflow: ellipsis; } .product-picture img { display: block; width: 100%; } .product-np { height: 15px; overflow: hidden; } .product-ie { font-size: 0.8em; color: #777; }
每天进步一点点，点滴记录，积少成多。
以此做个记录，
如有不足之处还望多多留言指教！
