这篇文章主要介绍了原生 JavaScript 实现瀑布流布局的相关资料, 实现鼠标下拉图片自动加载效果,和百度图片效果类似,需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
效果图:
具体代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <link rel="stylesheet" type="text/CSS" href="css/style.css">
- <script type="text/javascript" src="js/app.js">
- </script>
- </head>
- <body>
- <div id="container">
- <div class="box">
- <div class="box_img">
- <img src="images/1.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/2.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/3.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/4.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/5.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/6.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/7.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/8.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/9.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/10.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/1.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/2.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/3.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/4.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/5.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/6.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/7.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/8.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/9.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/10.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/1.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/2.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/3.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/4.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/5.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/6.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/7.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/8.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/9.jpg" alt="">
- </div>
- </div>
- <div class="box">
- <div class="box_img">
- <img src="images/10.jpg" alt="">
- </div>
- </div>
- </div>
- </body>
- </html>
CSS 代码:
- *{
- margin: 0px;
- padding: 0px;
- }
- #container{
- position: relative;
- }
- .box{
- padding: 5px;
- float: left;
- }
- .box_img{
- padding: 5px;
- border: 1px solid #cccccc;
- box-shadow: 0 0 5px #ccc;
- border-radius: 5px;
- }
- .box_img img{
- width: 150px;
- height:auto;
- }
js 代码:
- window.onload = function() {
- imgLocation("container", "box");
- var imgData = {
- "data": [{
- "src": "2.jpg"
- },
- {
- "src": "3.jpg"
- },
- {
- "src": "4.jpg"
- },
- {
- "src": "5.jpg"
- },
- {
- "src": "6.jpg"
- },
- {
- "src": "7.jpg"
- },
- {
- "src": "8.jpg"
- },
- ]
- };
- window.onscroll = function() {
- if (checkFlag()) {
- var cparent = document.getElementById("container");
- for (var i = 0; i < imgData.data.length; i++) {
- var ccontent = document.createElement("div");
- ccontent.className = "box";
- cparent.appendChild(ccontent);
- var boximg = document.createElement("div");
- boximg.className = "box_img";
- ccontent.appendChild(boximg);
- var img = document.createElement("img");
- img.src = "images/" + imgData.data[i].src;
- boximg.appendChild(img);
- }
- imgLocation("container", "box");
- }
- }
- }
- function checkFlag() {
- var cparent = document.getElementById("container");
- var ccontent = getChildnode(cparent, "box");
- var lastContentHeight = ccontent[ccontent.length - 1].offsetTop;
- var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
- var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
- if (lastContentHeight < scrollTop + pageHeight) {
- return true;
- }
- }
- function imgLocation(parent, content) {
- var cparent = document.getElementById(parent);
- var ccontent = getChildnode(cparent, content);
- var imgWidth = ccontent[0].offsetWidth;
- var cols = Math.floor(document.documentElement.clientWidth / imgWidth);
- cparent.style.cssText = "width:" + imgWidth * cols + "px;margin:0 auto";
- //把第二排的左起第一张图片放到第一排高度最小的那张下面
- var imgHeightArr = [];
- for (var i = 0; i < ccontent.length; i++) {
- if (i < cols) {
- imgHeightArr[i] = ccontent[i].offsetHeight;
- } else {
- var minHeight = Math.min.apply(null, imgHeightArr);
- var minHeightIndex = getMinHeightLoc(imgHeightArr, minHeight);
- console.log("minHeightIndex" + minHeightIndex);
- ccontent[i].style.position = "absolute";
- ccontent[i].style.top = minHeight + "px";
- ccontent[i].style.left = ccontent[minHeightIndex].offsetLeft + "px";
- imgHeightArr[minHeightIndex] = imgHeightArr[minHeightIndex] + ccontent[i].offsetHeight;
- console.log(imgHeightArr[i]);
- console.log("高度最低:" + minHeight);
- }
- }
- }
- function getChildnode(parent, content) {
- var contentArr = [];
- var allcontent = parent.getElementsByTagName("*");
- for (var i = 0; i < allcontent.length; i++) {
- if (allcontent[i].className == content) {
- contentArr.push(allcontent[i]);
- }
- };
- return contentArr;
- }
- function getMinHeightLoc(imgHeightArr, minHeight) {
- for (var i in imgHeightArr) {
- if (imgHeightArr[i] == minHeight) {
- return i;
- }
- }
- }
希望本文所述对大家学习 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0406/267601.html