首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于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实现瀑布流布局(二)

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery操作对象数组元素方法详解
Nov 26 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
javascript html5实现表单验证
Mar 01 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
js实现三级联动效果（简单易懂）
Mar 27 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 Javascript
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
信号库(1) limit(1) MYSQL函数(1) 计时器(1) turtle(1) 定时任务(2) blinker(1) Mysql报错(1) mysql.user(1) 绘图(1)
You might like
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
1亿条数据如何分表100张到Mysql数据库中（PHP）
2015/07/29 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
jquery 插件学习（二）
2012/08/06 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
JS解析XML实例分析
2015/01/30 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
Paradigit比利时电脑卖场：购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
SCHIESSER荷兰官方网站：德国内衣专家
2020/10/09 全球购物
《月亮湾》教学反思
2014/04/14 职场文书
英语系本科生求职信
2014/07/15 职场文书
校运会新闻稿
2015/07/17 职场文书
python开发制作好看的时钟效果
2022/05/02 Python