<!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. AjAX 异步通信

    <!DOCTYPE html> <html lang="en"> <head> <title>xmlhttprequest ajax ...

  2. 第二章 linux不为人知的命令

    文件和目录命令 cd /home 进入 home目录' cd ..返回上一级目录 pwd显示当前工作路径 ls查看目录中的文件 ls -l 显示文件和目录的详细资料(可简写为ll),后可跟具体文件名 ...

  3. Linux-grep,awk,sed

    grep 参考1:https://www.cnblogs.com/ITtangtang/p/3950497.html sed 参考:https://www.cnblogs.com/wangqiguo/ ...

  4. AJAX异步更改数据库

    前段时间做了一个小网站,里面有个小功能感觉挺好的,在此与大家分享一下,还请各位大神不要笑话小弟的无知. 此功能大概是这个样子的:点击下图中的类别名称,就可以对类别进行修改. 点击类别名称以后,原来的表 ...

  5. 【oracle】ORA-00257 archiver error. Connect internal only, until freed

    [原因]归档日志太多导致磁盘空间过小. [解决办法]删除日志或加大空间

  6. [Algorithm] 118. Pascal's Triangle

    Given a non-negative integer numRows, generate the first numRows of Pascal's triangle. In Pascal's t ...

  7. Layui 隐藏左侧菜单

    简单实现 //隐藏菜单 var bl = $("#LAY_app_flexible").hasClass("layui-icon-shrink-right"); ...

  8. ESA2GJK1DH1K升级篇: STM32远程乒乓升级,基于(WIFI模块AT指令TCP透传方式),定时访问升级

    前言 学习此代码所需: 实现功能概要 定时使用http访问云端的程序版本,如果版本不一致,然后通过http下载最新的升级文件,实现升级. 测试准备工作(默认访问我的服务器,改为自己的服务器,请看后面说 ...

  9. <虚树+树型DP> SDOI2011消耗战

    <虚树+树型DP> SDOI2011消耗战 #include <iostream> #include <cstdio> #include <cstring&g ...

  10. 洛谷 P3373 【模板】线段树 2 题解

    P3373 [模板]线段树 2 题目描述 如题,已知一个数列,你需要进行下面三种操作: 1.将某区间每一个数乘上x 2.将某区间每一个数加上x 3.求出某区间每一个数的和 输入格式 第一行包含三个整数 ...