这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇使用 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 实现图片展示瀑布流效果 (简单实例) 就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0524/332049.html