分别使用js原生代码和jQuery实现瀑布流效果

  瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局js原生代码，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部.。

  实现瀑布流的核心方法是两个函数(详见代码JS代码和jQuery代码部分)

  1、图片位置放置函数，该函数将下一张图片摆放在所有已加载图片的距离涌口顶部高度最小的那张图片的下方，主要通过以下几步完成：

  1)根据窗口的大小和图片的宽度决定一排放置几张图片。

  2)找到第一排的图片中高度最小的图片A，并将下一张图片B放在高度最小图片A的下方。

  3)将第一排高度最小的图片的高度调整为图片A和图片B的高度的和。

  4)重复步骤2)和步骤3)直到将所有已加载的图片放置完。

  2、图片加载函数，该函数通过判断已加载图片是否显示到最底部来判断是否需要加载新的图片，主要通过以下几步完成：

  1)找到当前一加载图片的最下方的图片js原生代码，即最后加载的那张图片。

  2)取得该图片距离窗口顶部得位置offsetTop。

  3) 取得窗口的高度clientTop。

  4) 取得鼠标滚动的距离scrollTop。

  5)判断若offsetTop小于clientTop和scrollTop的和则返回表示加载图片的布尔值true。

  动画效果：

  源代码：

  css样式

  *{

  padding: 0;

  margin: 0;

  }

  #container{

  position: relative;

  }

  .box{

  /position: relative;/

  float: left;

  }

  .content{

  padding: 10px;

  box-shadow: 0 0 5px #ccc;

  border: 1px solid #ccc;

  border-radius: 5px ;

  }

  .content img{

  width: 200px;

  height: auto;

  }

  js原生代码

  window.onload=function(){

  imgLocation("container","box");

  var imgData={"data":{"src":"1.[jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]

  }

  window.onscroll=function(){

  if (scrollSide()) {

  var oParent=document.getElementById("container");

  for (var i=0;i

  $(document).ready(function () {

  $(window).on("load",function(){

  imgLocation();

  var dataIma={"data":[{"src":"1.jpg"},{"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 (scrollside()){

  $.each(dataIma.data,function (index,value) {

  var box=$("

  ").addClass("box").appendTo($("#container")); var content=$("

  ").addClass("content").appendTo(box); $("").attr("src","images/"+$(value).attr("src")).appendTo(content) }); imgLocation(); } } }) }); //通过判断已加载图片是否显示到最底部来判断是否需要加载新的图片 function scrollside(){ var box=$(".box"); var lastboxHeight=box.last().get(0).offsetTop+Math.floor(box.last().height()/2); var documentHeight=$(document).width(); var scrollHeight=$(window).scrollTop(); return( lastboxHeight