1.建立Html模版
想法是先用一个div container承载所有内容,然后div box用来放置图片,最后div box_border来当图片框,代码如下
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>瀑布流</title></head><body><div class="container" id="container"><div class="box_border" id="box_border"><div class="box" id="box1"><img src="image/01.jpg"></div><!--把Box复制多份,这里因为代码重复省略了--></div></div></body></html>
效果:(未设置css属性所以都是垂直放置的)
2.通过css简单设置样式
主要设置水平放置,相框颜色,边界之类的
/*边界不留空,背景黑灰*/body{margin: 0px;background: darkgray;}/*总布局设置为相对布局*/.container{position: relative;}/*设置box属性*/.box{padding: 5px;float: left;}/*设置图片边框阴影和圆角*/.box_border{padding: 5px;border: 1px solid #cccccc;box-shadow: 0px 0px 5px #ccc;border-radius: 5px;}/*设置图片格式*/.box_border img{width: 150px;height: auto;}效果:(边框什么都有了)
3.JS控制每一行所摆放的图片个数
上面的css布局之后,浏览器窗口大小改变,里面的图片数量也会改变,现在要用JS固定住每一行的图片数量,对于不同尺寸的屏幕都能做到很好的效果
/*用于加载其他函数*/window.onload = function(){setImgLocation("container");}/*设置图片个数*/function setImgLocation(parent){var cparent = document.getElementById(parent);//得到父节点var childArray = getChildNodes(cparent);//得到图片数量var imgWidth = childArray[0].offsetWidth;//获取照片宽度var screenWidth = document.documentElement.clientWidth;//获取浏览器宽度var count = Math.floor(screenWidth/imgWidth);//每行的个数cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//设置其宽度并居中}/*获取全部图片的个数*/function getChildNodes(parent){var childArray =[];//定义一个数组存放图片boxvar tempNodes = parent.getElementsByTagName("*");//获取父节点下的所有节点//循环添加class为box的节点for(var i = 0;i<tempNodes.length;i++){if(tempNodes[i].className == "box"){childArray.push(tempNodes[i]);}}return childArray;//返回所有的子节点}效果图:针对不同屏幕大小显示的个数是不一样的
4.JS实现静态瀑布流
先实现静态的布局,也就是浏览器下拉不会自动刷新出新的图片.
实现排列算法很简单
1.把第一排图片的高度全部存到一个数组
2.计算出第一排中的图片的最小高度和对应位置
3.把第一排之后的第一个图片放到该位置上
4.重新设置该位置的高度为两个图片相加
5.循环2剩余全部图片
代码:
/*用于加载其他函数*/window.onload = function(){setImgLocation("container");}/*设置图片个数及位置排列*/function setImgLocation(parent){var cparent = document.getElementById(parent);//得到父节点var childArray = getChildNodes(cparent);//得到图片数量var imgWidth = childArray[0].offsetWidth;//获取照片宽度var screenWidth = document.documentElement.clientWidth;//获取浏览器宽度var count = Math.floor(screenWidth/imgWidth);//每行的个数cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//设置其宽度并居中//定义数组,存放第一行照片高度var imgHArray = [];//循环遍历图片for(var i=0;i<childArray.length;i++){//如果图片在第一行则获取高度if(i<count){imgHArray[i] = childArray[i].offsetHeight;}else//否则把最小高度的填充剩余图片{var minHeight = Math.min.apply(null,imgHArray);//获取最小高度var minIndex = getMinIndex(minHeight,imgHArray);//获取最小高度对应的下标childArray[i].style.position = "absolute";//设置要填充的图片盒子为绝对布局,否则不能更换位置childArray[i].style.top = minHeight+"px";//设置要填充图片距顶高度childArray[i].style.left = childArray[minIndex].offsetLeft+"px";//设置要填充图片距左高度imgHArray[minIndex] += childArray[i].offsetHeight;//填充后把当前位置高度设为两个图片相加//开始下一轮循环}}}/*获取最小高度对应的下标*/function getMinIndex(minHeight,imgHArray){for(var i in imgHArray){if(imgHArray[i] == minHeight){return i;}}}/*获取全部图片的个数*/function getChildNodes(parent){var childArray =[];//定义一个数组存放图片boxvar tempNodes = parent.getElementsByTagName("*");//获取父节点下的所有节点//循环添加class为box的节点for(var i = 0;i<tempNodes.length;i++){if(tempNodes[i].className == "box"){childArray.push(tempNodes[i]);}}return childArray;//返回所有的子节点}效果:
5.js实现动态加载
动态加载也就是滚动条永远滑不到底部,要解决动态加载我们需要考虑两个问题:
1.什么时候加载?
滑动距离+浏览器高度>最后一张图片距离顶部的距离
2.怎样加载?
通过创建新的节点,把创建的节点添加进去即可
最终代码:
/*用于加载其他函数*/window.onload = function() {var cparent = document.getElementById("container");//得到父节点setImgLocation(cparent);//设置加载的图片var data = ["image/01.jpg", "image/02.jpg", "image/03.jpg", "image/04.jpg", "image/05.jpg", "image/06.jpg", "image/07.jpg", "image/08.jpg", "image/09.jpg","image/11.jpg", "image/12.jpg", "image/13.jpg", "image/14.jpg", "image/15.jpg", "image/16.jpg", "image/17.jpg"];//滑动监听window.onscroll = function () {if (checkLoad(cparent)) {for (var i = 0; i < data.length; i++) {//创建新的节点var div1 = document.createElement("div");div1.className = "box";var div2 = document.createElement("div");div2.className = "box_border";var img = document.createElement("img");img.className = ".box_border img";img.src = data[i];div2.appendChild(img);div1.appendChild(div2);cparent.appendChild(div1);}setImgLocation(cparent);//创建节点后重新排列}}}/*检查是否应该加载*/function checkLoad(cparent){var childArray = getChildNodes(cparent);//得到图片个数var lastImgHight = childArray[childArray.length-1].offsetTop;//得到最后一张图片距离顶部高度var scrollHeight = document.documentElement.scrollTop||document.body.scrollTop;//获得滑动距离(浏览器兼容性真烦人)var browserHeight = document.documentElement.clientHeight;//获得浏览器高度if(lastImgHight < scrollHeight+browserHeight){//判断是否加载return true;}else {return false;}}/*设置图片个数及位置排列*/function setImgLocation(cparent){var childArray = getChildNodes(cparent);//得到图片数量var imgWidth = childArray[0].offsetWidth;//获取照片宽度var browserWidth = document.documentElement.clientWidth;//获取浏览器宽度var count = Math.floor(browserWidth/imgWidth);//每行的个数cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//设置其宽度并居中//定义数组,存放第一行照片高度var imgHArray = [];//循环遍历图片for(var i=0;i<childArray.length;i++){//如果图片在第一行则获取高度if(i<count){imgHArray[i] = childArray[i].offsetHeight;}else//否则把最小高度的填充剩余图片{var minHeight = Math.min.apply(null,imgHArray);//获取最小高度var minIndex = getMinIndex(minHeight,imgHArray);//获取最小高度对应的下标childArray[i].style.position = "absolute";//设置要填充的图片盒子为绝对布局,否则不能更换位置childArray[i].style.top = minHeight+"px";//设置要填充图片距顶高度childArray[i].style.left = childArray[minIndex].offsetLeft+"px";//设置要填充图片距左高度imgHArray[minIndex] += childArray[i].offsetHeight;//填充后把当前位置高度设为两个图片相加//开始下一轮循环}}}/*获取最小高度对应的下标*/function getMinIndex(minHeight,imgHArray){for(var i in imgHArray){if(imgHArray[i] == minHeight){return i;}}}/*获取全部图片的个数*/function getChildNodes(parent){var childArray =[];//定义一个数组存放图片boxvar tempNodes = parent.getElementsByTagName("*");//获取父节点下的所有节点//循环添加class为box的节点for(var i = 0;i<tempNodes.length;i++){if(tempNodes[i].className == "box"){childArray.push(tempNodes[i]);}}return childArray;//返回所有的子节点}效果:
新闻热点
疑难解答
