原生jquery实现中英文切换_工作实战案例，瀑布流布局实现（方法：CSS3，原生JS，jQuery）。...

案例：瀑布流布局实现。

涉及技术点：

• HTML + CSS简单布局

• jQuery基础运用，瀑布流布局实现3种方法：原生JS，jQuery，CSS3

CSS3版本：

瀑布流布局(CSS版本)

代码：

/*css代码*/*{margin:0;padding: 0}  #main{    -webkit-column-width:229px;    -moz-column-width:229px;    -o-column-width:229px;    -ms-column-width:229px;  }  .box{padding: 10px 0 0 15px;    display: inline-block;    }  .pic{    padding: 10px;    border:1px solid #ccc;    border-radius: 5px;    box-shadow: 0 0 3px #ccc;    width:192px;    }  .pic img{width:192px;    height: auto}

<div id="main">    <div class="box">      <div class="pic">        <img src="image/P_00.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_01.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_02.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_03.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_04.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_05.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_06.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_07.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_08.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_09.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_010.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_011.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_012.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_013.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_014.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_015.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_016.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_017.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_018.jpg" />      div>    div>  div>

原生JS：

瀑布流布局(js版本)

代码：

/*css*/*{margin:0;padding: 0}  #main{position: relative;}  .box{padding: 5px 0 0 5px;    float: left;}  .pic{    padding: 10px;    border:1px solid #ccc;    border-radius: 5px;    box-shadow: 0 0 3px #cc2;    }  .pic img{width:192px;    height: auto}

<div id="main">    <div class="box">      <div class="pic">        <img src="image/P_00.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_01.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_02.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_03.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_04.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_05.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_06.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_07.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_08.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_09.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_010.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_011.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_012.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_013.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_014.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_015.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_016.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_017.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_018.jpg" />      div>    div>  div>  <script type="text/javascript">    window.onload=function(){      waterfall("main","box");      var dataInt={"data":[{"src":"P_01.jpg"},{"src":"P_02.jpg"},{"src":"P_03.jpg"},{"src":"P_04.jpg"},{"src":"P_05.jpg"},{"src":"P_06.jpg"}]}      window.onscroll=function(){        if(checkScrollSlide()){          var oParent=document.getElementById("main");          for(var i=0;i            var oBox=document.createElement("div");            oBox.className='box';            oParent.appendChild(oBox);            var oPic=document.createElement("div");            oPic.className="pic";            oBox.appendChild(oPic);            var oImg=document.createElement("img");            oImg.src="image/"+dataInt.data[i].src;            oPic.appendChild(oImg);          }          waterfall("main","box");        }      }    }    function waterfall(parent,box){      var oParent=document.getElementById(parent);      var oBoxs=getByClass(oParent,box);      var oBoxW=oBoxs[0].offsetWidth;      var cols=Math.floor(document.documentElement.clientWidth/oBoxW);      oParent.style.cssText="width:"+oBoxW*cols+"px;margin:0 auto";      var hArr=[];      /*      当拉宽/窄浏览器后，再滚动图片会出现图片重叠的bug.      原因：当拉宽/窄浏览器后，某些已经使用了position定位的图片节点不能恢复到第一排，因为第一排不能有绝对定位的样式，所以在判断不是第一排加绝对定位之前要把前面所有设置过的样式全部清零。      增加如下代码：      for (var i = 0; i < oBoxs.length; i++){        oBoxs[i].style="";      }      如果全部清零可能会拖慢性能，最好设置一个较大的数，如15或者更大一点的就可以了，不用全部清零，如下代码：      for (var i = 0; i < 15; i++){        oBoxs[i].style="";      }      */      for (var i = 0; i < 15; i++){        oBoxs[i].style="";      }      for (var i = 0; i < oBoxs.length; i++) {        if (i          hArr.push(oBoxs[i].offsetHeight);        }else{          var minH=Math.min.apply(null,hArr);          var index=getMinhIndex(hArr,minH);          oBoxs[i].style.position="absolute";          oBoxs[i].style.top=minH+"px";          oBoxs[i].style.left=oBoxs[index].offsetLeft+"px";          hArr[index]+=oBoxs[i].offsetHeight;        }      }    }    function getMinhIndex(arr,val){      for(var i in arr){        if (arr[i]==val) {          return i;        }      }    }    function checkScrollSlide(){      var oParent=document.getElementById("main");      var oBoxs=getByClass(oParent,"box");      var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);      var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;      var height=document.body.clientHeight || document.documentElement.clientHeight;      return (lastBoxHtrue:    }    function getByClass(parent,clsName){      var boxArr=[],        oElements=parent.getElementsByTagName("*");      for (var i = 0; i < oElements.length; i++) {        if (oElements[i].className==clsName) {          boxArr.push(oElements[i]);        }      }      return boxArr;    }script>

jQuery：

瀑布流布局(jQuery版本)

代码：

/*css*/*{margin:0;padding: 0}  #main{position: relative;}  .box{padding: 5px 0 0 5px;    float: left;}  .pic{    padding: 10px;    border:1px solid #ccc;    border-radius: 5px;    box-shadow: 0 0 3px #cc2;    }  .pic img{width:192px;    height: auto}

<div id="main">    <div class="box">      <div class="pic">        <img src="image/P_00.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_01.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_02.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_03.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_04.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_05.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_06.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_07.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_08.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_09.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_010.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_011.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_012.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_013.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_014.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_015.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_016.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_017.jpg" />      div>    div>    <div class="box">      <div class="pic">        <img src="image/P_018.jpg" />      div>    div>  div>  <script type="text/javascript" src="jquery-1.8.3.min.js">script>  <script type="text/javascript">    $(function(){      waterfall();      var dataInt={"data":[{"src":"P_01.jpg"},{"src":"P_02.jpg"},{"src":"P_03.jpg"},{"src":"P_04.jpg"},{"src":"P_05.jpg"},{"src":"P_06.jpg"}]}      $(window).on("scroll",function(){        if(checkScrollSlide()){          $.each(dataInt.data,function(key,value){            var oBox=$("

").addClass("box").appendTo($("#main")); var oPic=$("

").addClass("pic").appendTo($(oBox)); $("").attr("src","image/"+$(value).attr("src")).appendTo($(oPic)); }) waterfall(); } }) }) function waterfall(){ var $boxs=$("#main>div"); var w=$boxs.eq(0).outerWidth(); var cols=Math.floor($(window).width()/w); $("#main").width(w*cols).css("margin","0 auto"); var hArr=[]; $boxs.each(function(index,value){ if (index hArr.push($boxs.eq(index).outerHeight()); }else{ var minH=Math.min.apply(null,hArr); var minIndex=$.inArray(minH,hArr); $(value).css({ "position":"absolute", "top":minH+"px", "left":minIndex*w+"px" }) hArr[minIndex]+=$boxs.eq(index).outerHeight(); } }) } function checkScrollSlide(){ var $lastBox=$("#main>div").last(); var lastDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2); var scrollTop=$(window).scrollTop(); var documentH=$(window).height(); return (lastDistrue:false; } script>

‍

推荐阅读：

基于Bootstrap的CSS3响应式滑动侧边栏布局代码解析/附源码下载

简单实用的jQuery响应式网格瀑布流布局代码解析/附源码下载

前端设计，CSS 常用布局解决方案

【常用整理】CSS布局方案大全

作者 | 思齐 | 蚂蚁开源社区大神，资深前端工程师

觉得文章不错，点下在看

点击阅读原文，演示/本地下载demo源码

↓↓↓↓