<!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. MySQL小测试（2）

    2.创建一个stu表,字段有:自增主键id,不为空姓名,默认值性别(枚举类型),无限制身高 create table stu( id int primary key auto_increment, n ...

  2. 第三章 linux常用的命令

    安装笔记: 1 安装linux操作系统时,会默认创建一个超级管理员帐号:root 2 安装时,当进行到选择哪种类型的安装时,我们选择"使用所有空间"的类型 Linux概念性的东西 ...

  3. XIX Open Cup named after E.V. Pankratiev. Grand Prix of Eurasia, Division 1.

    A 签到. C 源点向每个软件连边.把每个软件拆成对应版本数个点,每个软件向版本连边.把每个conflict也看成一个点.每个版本向它对应的conflict连边,conflict向汇点连边.没有在co ...

  4. First Chance Exception是什么？

    是否调试过应用程序并在输出窗口中看到有关“First Chance”异常的消息?有没有想过: 什么是First Chance Exception? 第一次机会异常是否意味着我的代码中存在问题? 在调试 ...

  5. ESA2GJK1DH1K升级篇: STM32远程乒乓升级,基于WIFI模块AT指令TCP透传方式,定时访问升级(含有数据校验)

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

  6. NOIP2013-2014提高组题目浅析

    1.前言 迎接NOIP的到来...在这段闲暇时间,决定刷刷水题.这里只是作非常简单的一些总结. 2.NOIP2014 <1> 生活大爆炸之石头剪刀布(模拟) 这是一道考你会不会编程的题目. ...

  7. CPU 的由来

    由 c# 的CEF 框架提供的 js 扩展,WebBrowser. JavascriptObjectRepository. 问:为什么要提供这一种方式. 提供了一种 能让js 与后端代码通讯的 方式. ...

  8. 【border树】【P2375】动物园

    Description 给定一个字符串 \(S\),对每个前缀求长度不超过该前缀一半的公共前后缀个数. 共有 \(T\) 组数据,每组数据的输出是 \(O(1)\) 的. Limitations \( ...

  9. nuxtjs如何在单独的js文件中引入store和router

    nuxtjs里面集成vuex的创建方式改变了,并且官方不建议以导出Vuex实例的方式创建store,并且会在nuxt3里面删除.这样就会存在一个问题,我怎么像普通vue spa项目一样直接 impor ...

  10. cocos:C++ 导出到lua, genbindings.py修改

    cocos:C++ 导出到lua, genbindings.py修改 1. 准备 把tools目录下的cocos2dx_extension.ini, genbindings.py, userconf. ...