简单实现加载图片的瀑布流效果

代码很简单,没有注释

<style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        #container{
            position:relative;
        }
        .box{
            padding:5px;
            float:left;
        }
        .box_img{
            padding:5px;
            border:1px solid #CCC;
            box-shadow:0 0 5px #CCC;
            border-radius:5px;

        }
        .box_img img{
            width:150px;
            height:auto;
        }
    </style>
  </head>
  <body>
      <div id="container">
      <div class="box">
              <div class="box_img">
                  <img alt="" src="img/1.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/2.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/3.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/4.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/5.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/1.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/2.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/3.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/4.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/5.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/1.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/2.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/3.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/4.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/5.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/1.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/2.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/3.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/4.jpg">
              </div>
          </div>
          <div class="box">
              <div class="box_img">
                  <img alt="" src="img/5.jpg">
              </div>
          </div>
      </div>
      <script type="text/javascript">
          window.onload = function(){
              imgLocation("container","box");
              var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"1.jpg"},{"src":"2.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 = "img/"+imgData.data[i].src;
                          boximg.appendChild(img);
                      }
                      imgLocation("container","box");

                  }
              };
          };

          function checkFlag(){
              var cparent = document.getElementById("container");
              var ccontent = getChildElement(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){
              //将parent下所有的content全部取出
              var cparent = document.getElementById(parent);
              var ccontent = getChildElement(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 getChildElement(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;
          }

      </script>
  </body>
时间: 2024-11-06 07:29:57

简单实现加载图片的瀑布流效果的相关文章

异步加载技术实现瀑布流效果

异步加载技术实现瀑布流效果.当滚动条到最底部的时候触发一个事件,这个事件写入$.get()事件,向内部程序页传递类别id和页码,程序将会返回那个类别下的相对页的产品列表,如果程序查询当前类无产品即返回空. 滚动条事件要写在window.onscroll中才有效判断.如下: window.onscroll=function(){ // var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; var top

ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前,先把实现的基本原理说一下.当夜幕下拉到底部的时候,js可以判断滚动条的位置,到达底部触发js方法,执行jquery的ajax方法,向后台一般处理程序夜幕ashx文件请求数据源,得到json格式的数据源.然后,遍历json数据源,拼接一个li标签,再填充到页面上去. 首先,我们来做个简单的html页面

自定义实现带文字标题的瀑布流效果

在网上能找到的大部分资料中的瀑布流效果都是单纯的照片实现,现在我来实现一个带文字标题的.效果如下: 每个item都是由图片和文字标题两部分组成. 布局方式为ScrollView里面嵌套一个水平方向的LinearLayout,里面再嵌套两个竖直方向的LinearLayout,然后判断竖直方向的两个LinearLayout的高度,向比较低的那个Linearlayout里面添加item. 下面是代码 <ScrollView xmlns:android="http://schemas.androi

用jQuery实现瀑布流效果学习笔记

jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把其中的几个函数具体记录一下. 首先,在WebStorm中新建一个工程,导入jquery库和几张img放在img文件夹下,新建html和css文件,用来搭建基本的网页结构.我们设定图片的宽度固定,高度不定,绝对定位,左浮动.这里就不细说了.我们主要讲jquery部分的知识. 这里我们讲一下我们要实现的

利用LruCache和DiskLruCache加载网络图片实现图片瀑布流效果(升级版)

MainActivity如下: package cc.patience7; import android.os.Bundle; import android.app.Activity; /** * Demo描述: * 采用瀑布流的形式加载大量网络图片 * 详细分析参见WaterfallScrollView * * 更新说明: * 在原本的的基础上添加了本地缓存DiskLruCache * * 所以在该示例中对于图片的缓存采用了:LruCache + DiskLruCache 的技术 * * 参考

利用LruCache加载网络图片实现图片瀑布流效果(改进版)

MainActivity如下: package cc.patience4; import cc.patience4.R; import android.os.Bundle; import android.app.Activity; /** * Demo描述: * 采用瀑布流的形式加载大量网络图片 * 详细分析参见WaterfallScrollView * * 更新说明: * 该示例在基础版的基础上加入了图片查看功能. * 点击瀑布流中一张图片后可欣赏图片并能对图片进行单指拖动和两指缩放. * 对

利用LruCache加载网络图片实现图片瀑布流效果(基础版)

MainActivity如下: package cc.patience3; import android.os.Bundle; import android.app.Activity; /** * Demo描述: * 采用瀑布流的形式加载大量网络图片 * 详细分析参见WaterfallScrollView * * 参考资料: * 1 http://blog.csdn.net/guolin_blog/article/details/10470797 * 2 http://blog.csdn.net

js实现瀑布流加载图片效果

今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1.设定一行中的列数:2.取第一行中每一个div的高度并把每一个高度放进一个数组中:3.算出数组中最小高度的index值:4.把第二行的第一个div放到最小高度的div的下方并把重新算出的高度值放进数组中,重新计算最小高度的index值:5.以此类推实现多栏布局的瀑布流效果:6.如果最后一张div的高度

重构项目之二:使用瀑布流效果加载图片

虽然最后这个功能使用了另外的插件,但是还是一下大概的原理吧,还是先上图: 功能描述: 根据不同的菜单的属性分别加载不同的数据 下拉滚动条到一定位置预加载图片,滚动条拉到最底下的时候渲染html: 鼠标移到菜单,切换各个列表图片: 鼠标移到图片上,显示详细信息: 技术实现方案: