<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>瀑布流</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="js/app.js"></script> </head> <body> <div id ="container"> <div class="box"> <div class="box_img" > <img src=".ideaimg2.jpg"> </div> </div> <div class="box"> <div class="box_img" > <img src=".idea/img/3.jpg"> </div> </div> <div class="box"> <div class=" box_img"> <img src=".idea/img/9b7f759c4c0d6a4187b2902f33386e27.jpg"> </div> </div> <div class="box"> <div class="box_img" > <img src=".idea/img/857ae43b321476e94252fad082292cce.jpg"> </div> </div> <div class="box"> <div class="box_img" > <img src=".idea/img/14934c7fd0a6ea3a2272c8dd05ebe0a2.jpg"> </div> </div> <div class="box"> <div class="box_img" > <img src=".idea/img/20140821101515614.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src=".idea/img/20140821101516903.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src=".idea/img/资源1.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src=".idea/img/738b4710b912c8fc5d56e46cf8039245d78821ed.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src=".idea/img/48540923dd54564ee758fb98b7de9c82d1584f55.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src=".idea/img/u=4136129481,4024516763&fm=21&gp=0.jpg"> </div> </div> <div class="box"> <div class="box_img" > <img src=".ideaimg2.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src=".idea/img/20140821101516903.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src=".idea/img/资源1.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src=".idea/img/738b4710b912c8fc5d56e46cf8039245d78821ed.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src=".idea/img/48540923dd54564ee758fb98b7de9c82d1584f55.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src=".idea/img/u=4136129481,4024516763&fm=21&gp=0.jpg"> </div> </div> <div class="box"> <div class="box_img" > <img src=".ideaimg2.jpg"> </div> </div> <div class="box"> <div class="box_img" > <img src=".idea/img/3.jpg"> </div> </div> <div class="box"> <div class=" box_img"> <img src=".idea/img/9b7f759c4c0d6a4187b2902f33386e27.jpg"> </div> </div> <div class="box"> <div class="box_img" > <img src=".idea/img/857ae43b321476e94252fad082292cce.jpg"> </div> </div> <div class="box"> <div class="box_img" > <img src=".idea/img/14934c7fd0a6ea3a2272c8dd05ebe0a2.jpg"> </div> </div> <div class="box"> <div class="box_img" > <img src=".idea/img/20140821101515614.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src=".idea/img/20140821101516903.jpg"> </div> </div> <div class="box"> <div class="box_img" > <img src=".idea/img/857ae43b321476e94252fad082292cce.jpg"> </div> </div> <div class="box"> <div class="box_img" > <img src=".idea/img/14934c7fd0a6ea3a2272c8dd05ebe0a2.jpg"> </div> </div> <div class="box"> <div class="box_img" > <img src=".idea/img/20140821101515614.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src=".idea/img/20140821101516903.jpg"> </div> </div> </div> </body> </html>
js代码：
/** * Created by Administrator on 2015/5/23. */ window.onload=function() { imgLocation("container", "box"); var imgDate={"date":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"资源1.jpg"},{"src":"9b7f759c4c0d6a4187b2902f33386e27.jpg"},{"src":"738b4710b912c8fc5d56e46cf8039245d78821ed.jpg"}]} window.onscroll = function () { if( checkFlag()) { var cparent = document.getElementById("container"); for (var i = 0; i < imgDate.date.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 = ".idea/img/" + imgDate.date[i].src; boximg.appendChild(img); }imgLocation("container", "box"); } } } function checkFlag() { var cparent = document.getElementById("container"); var ccontainer = getChildElemtent(cparent, "box"); var lastContentHeight = ccontainer[ccontainer.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 = getChildElemtent(cparent, content); var imgWidth = ccontent[0].offsetWidth; var num = Math.floor(document.documentElement.clientWidth / imgWidth); cparent.style.cssText = "Width:" + imgWidth * num + "px;margin:0 auto"; var boxHeightArr = []; for (var i = 0; i < ccontent.length; i++) { if (i < num) { boxHeightArr[i] = ccontent[i].offsetHeight; } else { var minheight = Math.min.apply(null, boxHeightArr); var minIndex=getminheightLocation(boxHeightArr,minheight); ccontent[i].style.position = "absolute"; ccontent[i].style.top=minheight + "px"; ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px"; boxHeightArr[minIndex]=boxHeightArr[minIndex]+ccontent[i].offsetHeight; } } } function getminheightLocation(boxHeightArr,minheight){ for( var i in boxHeightArr)if (boxHeightArr[i] == minheight) { return i; } } function getChildElemtent(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 }
css代码：
*{ margin: 0px; padding: 0px; } #container{ position: relative; } .box{ padding: 5px; float:left ; } .box_img{ padding: 5px; border: 1px; solid-color: #cccccc; box-shadow: #cccccc 0 0 5px; border-radius: 5px; } .box_img img{ height:auto; width:150px }
还是学生，写的可能都比较小白。
不过还是希望有个地方可以记录我的学习路径啦
以后写出的东西就放这里啦。
html代码：