<!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. redis常用操作（测试必备）

    连接redis redis的安装及基础配置,参考:https://www.cnblogs.com/UncleYong/p/9882843.html redis中,数据是key-value方式存储,ke ...

  2. mybatis框架-resultMap的自动映射级别-partial 和full的探讨

    现在我们做一个小实验,输出一下上一个案例中没有匹配的属性,注意哦,现在user类中是有内部嵌套的复杂数据类型的 运行结果: 注意到:现在居然连userPassword都打印不出来了,原因就是user类 ...

  3. 4、组件注册-自定义TypeFilter指定过滤规则

    4.组件注册-自定义TypeFilter指定过滤规则 4.1 FilterType.ANNOTATION 按照注解方式 4.2 FilterType.ASSIGNABLE_TYPE 按照给定的类型 @ ...

  4. springCloud学习1

    传统项目架构 传统项目分为三层架构,将业务逻辑层.数据库访问层.控制层放入在一个项目中. 优点:适合于个人或者小团队开发,不适合大团队开发. 分布式项目架构 根据业务需求进行拆分成N个子系统,多个子系 ...

  5. pycharm初识及格式化输出

    #_*_coding:utf-8_*_#作者:王佃元#日期:2019/12/6 #格式化输出name = input("Name")age = input("Age&qu ...

  6. sublime3插件BracketHighlighter的配置

    BracketHighlighter插件能为Sublime Text提供括号,引号这类高亮功能,但安装此插件后,默认没有高亮,只有下划线表示,不是很醒目,需要配置:1.在Sublime Text中用p ...

  7. [Python] Python 获取中文的首字母 和 全部拼音首字母

    Python 获取中文的首字母 和 全部拼音首字母 代码如下: import pinyin def getStrAllAplha(str): return pinyin.get_initial(str ...

  8. 使用golang写一个redis-cli

    使用golang写一个redis-cli 0. redis通信协议 redis的客户端(redis-cli)和服务端(redis-server)的通信是建立在tcp连接之上, 两者之间数据传输的编码解 ...

  9. 学习Linux要知道的知识点总结

    1 如何查看Linux的user和hostname? (1)打开终端查看 终端左侧的root@zlkj:~$,前面的root为user - 用户名,后面的zlkj为hostname - 主机名. (2 ...

  10. 【C++】一个指针占几个字节？为什么呢?

    一个指针在32位操作系统上,占4个字节 一个指针在64位操作系统上,占8个字节 但是,编译器为了兼容32位操作系统和64位操作系统,所以指针都是4个字节长度 为什么呢? 在计算机中,CPU不能直接与硬 ...