JavaScript日记——实现图片的瀑布流和底部刷新

瀑布流现在基本上是图片显示网页的标配，主要是为了适配图片和文字块的大小，使显示出的效果没有那么呆板
实现这个功能首先要有html，css和js基础

首先先实现瀑布流

即下一行的图片放在上一行的凹下去的地方

基本的html代码如下

    
    
    
    
    



    

        

            [站外图片上传中……(2)]
        
    
    

        

            [站外图片上传中……(3)]
        
    
    

        

            [站外图片上传中……(4)]
        
    
    

        

            [站外图片上传中……(5)]
        
    
    

        

            [站外图片上传中……(6)]
        
    
    

        

            [站外图片上传中……(7)]
        
    
    

        

            [站外图片上传中……(8)]
        
    
    

        

            [站外图片上传中……(9)]
        
    
    

        

            [站外图片上传中……(10)]
        
    
    

        

            [站外图片上传中……(11)]
        
    
    

        

            [站外图片上传中……(12)]
        
    

然后再写一下css

*{
    margin: 0px;
    padding: 0px;
}
/*container为相对布局*/
#container{
    position:relative;
}
/*box向左浮动*/
.box{
    padding:5px;
    float: left;
}
/*加一些边框*/
.img_box{
    padding: 5px;
    border:1px solid #ccc;
    box-shadow:0 0 5px #ccc;
    border-radius: 5px;
}
/*宽度固定，高度自适应，使图片不变形*/
.img_box img{
    width: 150px;
    height: auto;
}

接下来就是这次的核心，写js

//开始加载要执行的方法
window.onload=function(){
    imgLocation("container","box")
}
function imgLocation(parent,content){
    var cparent=document.getElementById(parent);
    var ccontent=getChildElement(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 BoxHeightArr=[];
    for(var i=0;i

这样就简单实现了瀑布流效果

接下来是下拉到底部自动刷新

主要是在滚动时监听是否到底部，到达差不多底部的位置就加载
添加以下代码即可

window.onscroll=function(){
    //模拟数据
    var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]}
    if (checkFlag()){
        var cparent=document.getElementById("container");
        for(var i =0;i

效果图如下

效果图