<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: ;
padding: ;
}
#main {
position: relative;
height: auto;
margin: auto;
}
.box {
padding: 10px 10px;
float: left;
/*height:auto;
*/
}
.pic {
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
box-shadow: 3px #ccc;
/*height:auto;
*/
}
.pic img {
width: 200px;
height: auto;
}
</style>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x500-2.png" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x500-3.png" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x500-5.png" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x500-2.png" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x500-4.png" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x500-1.png" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x500-3.png" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="http://www.jq22.com/img/cs/500x500-5.png" alt="">
</div>
</div>
</div>
<script>
window.onload = function () {
water();
}
function water() {
// 获取一下大盒子
var main = document.getElementById("main");
// 获取每个小盒子，因为有兼容，所以写个函数，函数在下面
var boxs = getByClass(main, "box");
// 获取屏幕宽，也有兼容
var clientW = document.body.clientWidth || document.documentElement.clientWidth;
// 获取每个小盒子的宽，因为宽度都一样，获取第一个的就行
var boxW = boxs[].offsetWidth;
// 算一下得几列就好，因为可能算出小数，所以向下取整
var cols = Math.floor(clientW / boxW);
// 给大盒子设置宽度
main.style.width = cols * boxW + 'px';
// 来一个数组，这个数组里面存放前6个盒子的高度
var hArr = [];
for (var i = ; i < boxs.length; i++) {
if (i < cols) {
// 存放前六个高度
hArr.push(boxs[i].offsetHeight);
} else {
// 因为第七个要给前六个最短小的哪个下面放，所以要获取一下前六的最小高度
var minH = Math.min.apply(null, hArr);
// 获取这个最小的高度属于前六个的第几个
var minIndex = getIndex(minH, hArr);
// 给第七个设置位置
boxs[i].style.position = "absolute";
boxs[i].style.top = minH + 'px';
boxs[i].style.left = boxW * minIndex + 'px';
// 因为第八个和第七个一样，所以把哪个高度更新一下
hArr[minIndex] += boxs[i].offsetHeight;
}
}
}
function getIndex(val, arr) {
for (var i = ; i < arr.length; i++) {
if (arr[i] == val) {
return i;
}
}
}
function getByClass(parent, className) {
var arr = [];
var eles = parent.getElementsByTagName("*");
for (var i = ; i < eles.length; i++) {
if (eles[i].className == className) {
arr.push(eles[i])
}
}
return arr;
}
function checkScroll() {
var main = document.getElementById("main");
var boxs = getByClass(main, "box");
var h = boxs[boxs.length - ].offsetTop + boxs[boxs.length - ].offsetHeight / ;
var bh = document.body.scrollTop || document.documentElement.scrollTop;
var ch = document.body.clientHeight || document.documentElement.clientHeight;
if (h < bh + ch) {
return true;
} else {
return false;
}
}</script>
</body>
</html>

9.Javascript原生瀑布流的更多相关文章

  1. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  2. 使用原生javascript实现瀑布流

    简介 瀑布流布局是一种很常见的布局方式,他的主要视觉体验为图片元素等宽不等高,图片元素之间的水平排序参差不齐,而且随着滚动条的滚动,数据会进行异步的加载,这样的布局有两个好处,1-有视觉的冲击力,比较 ...

  3. js原生瀑布流

    背景: 1.在移动端开发,jq文件是显得非常庞大的,所以所有效果尽量用HTML5和原生js实现. 2.本次瀑布流是固定列数,采用非浮动的另外一种瀑布流思想实现的. 3.本次数据来源是json接口 4. ...

  4. JavaScript实现瀑布流

    前端内容: 使用JavaScript和四个div,将照片放入四个div中 <!DOCTYPE html> <html lang="en"> <head ...

  5. javascript实现瀑布流效果（固定宽度）

    HTML代码: <div id="content"> <div class="box"> <div class="img ...

  6. 关于瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）

    瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为什么使用瀑 ...

  7. js瀑布流 原理实现揭秘 javascript 原生实现

    web,js瀑布流揭秘 瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说 ...

  8. JavaScript——原生js实现瀑布流

    瀑布流介绍及实现原理: 瀑布流是一种页面布局,页面上也有多等宽的块(块就页面内容),每一块都是绝对定位(absolute),每个块排列的方式如下:寻找现在高度最小的列,把该块定位到该列下方.需要知道, ...

  9. 用原生JavaScript实现图片瀑布流的浏览效果

    学习JS,活跃思维,灵活运用的一个较为典型的学习案例.同一个瀑布流的效果但实现方式却很多,利用递归.冒泡等等手法都可以达到你想要的目的.这次要说的就是利用类似递归来实现此效果的原创方案.此方案个人认为 ...

随机推荐

  1. flask实战-个人博客-模板 --

    模板 personalBlog采用典型的博客布局,左侧三分之二为主体,显示文章列表.正文:右侧三分之一为边栏,显示分为类列表.社交链接等.现在的工作是将HTML文件加工为模板,并创建对应的表单类,在模 ...

  2. telnet安装和使用教程

    一.安装telnet 1.检测telnet-server的rpm包是否安装 [root@localhost ~]# rpm -qa telnet-server若无输入内容,则表示没有安装.出于安全考虑 ...

  3. 08-cmake语法-set()

    CMake的基本数据类型是字符串,一组字符串在一起称为列表(list) 用于设置变量. set(VAR a b c) # 输出 VAR = a;b;c VAR 就是一个list 参考: https:/ ...

  4. reactnative遇到的问题总结

    1.View中出现文本报错,View等标签中不能出现字符串文本,字符串文本需要包在Text中,遇到如下错误 下面是问题代码: let rightTitle = this.props.rightTitl ...

  5. face-api.js：一个在浏览器中进行人脸识别的 JavaScript 接口

    Mark! 本文将为大家介绍一个建立在「tensorflow.js」内核上的 javascript API——「face-api.js」,它实现了三种卷积神经网络架构,用于完成人脸检测.识别和特征点检 ...

  6. 【java异常】It's likely that neither a Result Type nor a Result Map was specified

    错误原因:mybatis配置文件没有返回类型参数 resultType 解决办法:resultType= 添加

  7. phoenix SQLNestedException: Cannot create PoolableConnectionFactory

    java通过phoenix的jdbc链接hbase数据库遇到如下情况: 查看日志发现phoenix维护的表system.function 的文件缺失了(在hdfs上),就是有节点掉了. 用命令 $HB ...

  8. hadoop java.io.EOFException: Unexpected end of input stream

    执行hadoop 报错 java.io.EOFException: Unexpected end of input stream at org.apache.hadoop.io.compress.De ...

  9. docker自定义镜像上传阿里云

    1.alpine制作jdk镜像 2.Alpine制作jre镜像(瘦身) 3.Docker镜像上传至阿里云 alpine制作jdk镜像 alpine Linux简介 1.Alpine Linux是一个轻 ...

  10. 【字符串】【P5830】 【模板】失配树

    [字符串][P5830] [模板]失配树 Description 给定一个长度为 \(n\) 的字符串 \(S\),有 \(m\) 次询问,每次询问给定 \(S\) 的两个前缀,求它们的最长公共 bo ...