使用JS实现图片展示瀑布流效果的实例代码
不知大家有没有发现，一般的图片展示网站都会使用瀑布流效果，所谓的瀑布流
就是网站内的图片不会一下子全缓存出来，而是等你滚动到一定的距离的时候，
下面的图片才会继续缓存，并且图片也是随机出现的，只是宽度一样，高度并不
一样，高高低低就像瀑布一样，所以叫做瀑布流效果。下面我把代码给大家，大家
随便下几张图片试试。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流不重复</title>
<style>
*{margin: 0px;padding: 0px;list-style: none;}
#box{width: 1000px;margin: 0 auto;}
#box ul{float: left;width: 200px;margin-right: 50px;}
#box img{width: 200px;}
</style>
</head>
<body>
<div id="box">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
<script>
var box=document.getElementById('box');
var ul=box.children;
function insert(){
var x=0;
var srcNum=Math.floor(Math.random()*35);//35是35张图片，可改成任意数，我这里总共是35张图片。
var newli=document.createElement('li');
newli.innerHTML='<img src="images/'+srcNum+'.png" alt="">';//这是图片的文件名，要求是统一。
var minH=Math.min(ul[0].clientHeight,ul[1].clientHeight,ul[2].clientHeight,ul[3].clientHeight);
for (var i = 0; i < ul.length; i++) {
if (ul[i].clientHeight==minH) {
x=i;
break;
}
}
ul[x].appendChild(newli);
}
for (var i = 0; i < 20; i++) {
insert();
}
document.onscroll=function(){
var viewH=document.body.clientHeight||document.documentElement.clientHeight;
var winH=document.documentElement.scrollHeight;
var scrollT=document.body.scrollTop||document.documentElement.scrollTop;
if (winH-scrollT-viewH<500) {
for (var i = 0; i < 20; i++) {
insert();
}
}
}
</script>
</body>
</html>
以上这篇使用JS实现图片展示瀑布流效果的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
javascript实现仿百度图片的瀑布流加载效果
由于没有服务器,就用一个json字符串作为下拉时加载图片数据的来源了 html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="js/waterfall.js"></script> <styl
-
JavaScript实现图片自动加载的瀑布流效果
先给大家展示下效果图: 向下滑动网页的时候能够自动加载图片并显示. 盛放图片的盒子模型如下: <div class="box"> <div class="box_img"> <img src="Img/8.jpg"> </div> </div> 设置img-width为150px,然后box_img添加内边距和阴影效果,box的外边距为0,添加内边距.盒子的宽度是由img-width和边
-
javascript实现瀑布流动态加载图片原理
本文实例为大家分享了js瀑布流加载效果,动态加载图片,供大家参考,具体内容如下 鼠标滚动事件,当鼠标滚动到下边,动态加载图片. 1. HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现瀑布流效果-动态加载图片</title> <link rel="stylesheet" href="
-
使用JS实现图片展示瀑布流效果的实例代码
不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度一样,高度并不 一样,高高低低就像瀑布一样,所以叫做瀑布流效果.下面我把代码给大家,大家 随便下几张图片试试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu
-
使用JS实现图片展示瀑布流效果(简单实例)
不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度一样,高度并不 一样,高高低低就像瀑布一样,所以叫做瀑布流效果.下面我把代码给大家,大家 随便下几张图片试试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu
-
如何通过js实现图片预览功能【附实例代码】
实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co
-
使用 Node.js 实现图片的动态裁切及算法实例代码详解
背景&概览 目前常见的图床服务都会有图片动态裁切的功能,主要的应用场景用以为各种终端和业务形态输出合适尺寸的图片. 一张动辄以 MB 为计量单位的原始大图,通常不会只设置一下显示尺寸就直接输出到终端中,因为体积太大加载体验会很差,除了影响加载速度还会增加终端设备的内存占用.所以要想在各种终端下都能保证图片质量的同时又确保输出合适的尺寸,那么此时就需要根据图片 URL 来对原始图片进行裁切,然后动态生成并输出一张新的图片. URL 的设计 图片 URL 需要包含图片 id.尺寸.质量等信息.有两种
-
vue.js组件vue-waterfall-easy实现瀑布流效果
想必大家应该很多都已经习惯了jquery的DOM操作,jquery的瀑布流实现起来也很容易. 但是,随着时代的发展,随着时代的进步..... 算了算了,扯远了,既然能找到这儿来,肯定是在vue.js上已经有一定的基础了,咱们废话不多说,直接进入主题. vue-waterfall-easy easy! easy! easy! 重要的事情说三遍!!! 所以说,咱们今天用到的不是大家熟知的vue-waterfall,而是vue-waterfall-easy: 一.获取vue-waterfall-eas
-
js实现的美女瀑布流效果代码
瀑布流以及回顶部的效果 *{ margin:0; padding:0; } h1{ text-align:center; height:100px; } body{ background-color:RGB(232,231,226); } .all{ margin:0 auto; width:1000px; } .number{ float:left; width:225px; } .content { margin:5px; background-color:white; } img{ mar
-
js实现点击展开隐藏效果（实例代码）
本章给大家介绍用js事件冒泡实现鼠标点击显示提示框效果(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 先看看效果图: 代码实例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件冒泡-提示框</title> </head> <style> button { width: 160px; h
-
JS实现瀑布流效果
本文实例为大家分享了JS实现瀑布流效果的具体代码,供大家参考,具体内容如下 话不多说,直接上代码.如下: CSS部分: <style> .cont{margin: 0 auto;position: relative;} .box{float: left;padding: 4px;} .imgbox{ padding: 4px;} .imgbox img{width: 200px;display: block;border-radius: 4px;} </style> HTML部分(
-
原生js实现瀑布流效果
本文实例为大家分享了js实现瀑布流效果的具体代码,供大家参考,具体内容如下 CSS样式: <style> .cont{margin: 0 auto;position: relative;} .box{float: left;padding: 5px;} .imgbox{border: black solid 1px;padding: 5px;border-radius: 5px;} .imgbox img{width: 200px;display: block;} </style>
-
使用js实现瀑布流效果
本文实例为大家分享了js实现瀑布流效果的具体代码,供大家参考,具体内容如下 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo