使用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实现图片展示瀑布流效果的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
本文向大家介绍JS实现图片高亮展示效果实例，包括了JS实现图片高亮展示效果实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现图片高亮展示效果的方法。分享给大家供大家参考，具体如下： 昨天朋友让我帮着做个图片高亮展示的效果，虽然不难，不过满有创意的： 刚开始因为没有完全明白设计意图，阴差阳错的做了个这样的效果： 希望本文所述对大家JavaScript程序设计有所帮助。
-
本文向大家介绍js图片加载效果实例代码（延迟加载+瀑布流加载），包括了js图片加载效果实例代码（延迟加载+瀑布流加载）的使用技巧和注意事项，需要的朋友参考一下 主要做了两种图片加载的效果 一种是遇到页面图片比较多的时候，带读条效果的加载提示（为了验证正确加载，设置了1秒钟的加载间隔时间） 另外一种是根据滑块的位置进行图片的预加载，在用户不察觉的情况下，实现瀑布流的加载效果 一 延迟加载 主要思路：
-
本文向大家介绍JS实现图片幻灯片效果代码实例，包括了JS实现图片幻灯片效果代码实例的使用技巧和注意事项，需要的朋友参考一下 其效果是点击图片切换到下一张图片 首先准备五张图片 样式 js 其中用的是 fadeIn() -> 淡入 和 fadeOut()-> 淡出 两者效果叠加则可用 fadeToggle() fadeToggle() 方法在 fadeIn() -> 淡入 和 fadeOut()->
-
本文向大家介绍Ionic3实现图片瀑布流布局，包括了Ionic3实现图片瀑布流布局的使用技巧和注意事项，需要的朋友参考一下 瀑布流布局是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 瀑布流布局一般使用在网页中，在移动端用的比较少但是也不可缺。下面就介绍一下如何在ionic3中使用瀑布流布局。 首先创建一个项目，这里不
-
本文向大家介绍js瀑布流布局的实现，包括了js瀑布流布局的实现的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现瀑布流布局的具体代码，供大家参考，具体内容如下 原理： 1、瀑布流布局，要求进行布局的元素等宽，然后计算元素的宽与浏览器的宽度之比，得到需要布置的列数。 2、创建一个数组，长度为列数，数组元素为每一列已布置元素的总高度。（一开始为0）。 3、将未布置的元素，依次布置到
-
本文向大家介绍原生js实现移动端瀑布流式代码示例，包括了原生js实现移动端瀑布流式代码示例的使用技巧和注意事项，需要的朋友参考一下 瀑布流布局已成为当今非常普遍的图片展示方式，无论是PC还是手机等移动设备上。最近使用到了“懒加载”，现在更新一般，因为平时主要使移动端的开发所以库文件使用的是zepto.js 。当然也可以和jQuery 通用。 代码如下： 以上所述就是本文给大家分享的全部内容了，希望