基于JavaScript实现瀑布流布局(二)


Posted in Javascript onJanuary 26, 2016

本文实例讲解了JavaScript实现瀑布流布局详细代码,分享给大家供大家参考,具体内容如下

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>

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 =[];//定义一个数组存放图片box
  var 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 =[];//定义一个数组存放图片box
  var 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 =[];//定义一个数组存放图片box
  var tempNodes = parent.getElementsByTagName("*");//获取父节点下的所有节点
  //循环添加class为box的节点
  for(var i = 0;i<tempNodes.length;i++){
    if(tempNodes[i].className == "box"){
      childArray.push(tempNodes[i]);
    }
  }
  return childArray;//返回所有的子节点
}

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript oop开发滑动(slide)菜单控件
Aug 25 Javascript
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 #Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 #Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 #Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 #Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 #Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
Jan 26 #Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 #Javascript
You might like
第八节--访问方式
2006/11/16 PHP
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
PHP 正则表达式小结
2015/02/12 PHP
JavaScript 面向对象之命名空间
2010/05/04 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
python模拟Django框架实例
2016/05/17 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
英语专业学生的自我评价
2013/12/30 职场文书
2014年三万活动总结
2014/04/26 职场文书
心理健康活动总结
2014/04/30 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
同学联谊会邀请函
2019/06/24 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
Python极值整数的边界探讨分析
2021/09/15 Python