Home > Article > Web Front-end > How to achieve waterfall flow effect in JS
I will take the time to write another article today, about the effect of waterfall flow. Anyone who has worked on iOS knows that waterfall flow is also a very popular layout method in iOS, so I won’t introduce it here. Let’s take a look at how to use JS to achieve the waterfall flow effect.
I just entered the code directly, and the comments inside are very clear. If you don’t understand, you can ask me.
html:
瀑布流效果
CSS:
a, address, b, big, blockquote, body, center, cite, code, dd, del, p, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{ padding: 0; margin: 0; } #main { position: relative; } #main .box { padding: 15px 0 0 15px; float: left; } #main .box .pit { padding: 5px; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 0 2px gray; width: 165px; } #main .box .pit img { width: 165px; }
JS:
/** * Created by huminghao on 2017/7/5. */ function $(id) { return typeof id === 'string' ? document.getElementById(id) : id; } // 当页面加载完毕 window.onload = function () { // 实现瀑布流 waterFlow('main', 'box'); // 监听页面的滚动 window.onscroll = function () { // 判断是否具备加载图片的条件 if (checkWillLoadImg()) { // 造数据 var dataImg = {'data' : [{'src' : '0.jpg'}, {'src' : '1.jpg'},{'src' : '2.jpg'},{'src' : '3.jpg'},{'src' : '4.jpg'},{'src' : '5.jpg'},{'src' : '6.jpg'},{'src' : '7.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'}]} for (var i = 0; i < dataImg.data; i ++) { // 创建最外层的盒子 var newBox = document.createElement('p'); newBox.className = 'box'; $('main').appendChild(newBox); // 创建里面的盒子 var newPic = document.createElement('p'); newPic.className = 'pic'; newBox.appendChild(newPic); // 创建图片 var newImg = document.createElement('img'); newImg.src = 'images/' + dataImg.data[i].src; newPic.appendChild(newImg); } } } } // 实现瀑布流 function waterFlow(parent, box) { // 让所有盒子的父标签居中 // 1.拿到所有的盒子 var allBoxs = $(parent).getElementsByClassName(box); // 2.拿到其中一个盒子的宽度 var boxWidth = allBoxs[0].offsetWidth; // 3.求出页面的宽度 var screenWidth = document.body.clientWidth; // 4.求出列数 var clos = Math.floor(screenWidth / boxWidth); // 5.让父标签居中 $(parent).style.cssText = 'width: ' + clos * boxWidth + 'px; margin: 0 auto'; // 定位 // 定义一个高度数组 var heightArray = []; // 遍历 for (var i = 0; i < allBoxs.length; i ++) { // 求出所有盒子的高度 var boxHeight = allBoxs[i].offsetHeight; if (i
The above is the detailed content of How to achieve waterfall flow effect in JS. For more information, please follow other related articles on the PHP Chinese website!