写文章

jquery随机瀑布流简单代码实例

快乐打工仔 分类：实例代码

本章节分享一段代码实例，它实现了简单的随机瀑布流效果。

需要的朋友可以做一下分析。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>前端教程网</title>
<style type="text/css">
* {
  margin:0;
  padding:0;
  list-style-type:none;
}
a, img{
  border:0;
}
body{
  font:12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
/* container */
#container{
  width:940px;
  margin:50px auto;
}
#container ul{
  width:300px;
  list-style:none;
  float:left;
  margin-right:20px;
}
#container ul li{
  margin-bottom:20px;
}
#container ul li img{
  width:300px;
}
</style>
<script src="/wp-content/uploads/front-end-tutorial/error.html><p>src='
      +data+'.jpg</p></li>';
      $minUl = getMinUl();
      $minUl.append(html);
    }
  }
  loadMeinv();
  $(window).on("scroll",function(){
    $minUl = getMinUl();
    if($minUl.height() <= $(window).scrollTop()+$(window).height()){
      //当最短的ul的高度比窗口滚出去的高度+浏览器高度大时加载新图片
      loadMeinv();
    }
  })
  function getMinUl(){//每次获取最短的ul,将图片放到其后
    var $arrUl = $("#container .col");
    var $minUl =$arrUl.eq(0);
    $arrUl.each(function(index,elem){
      if($(elem).height()<$minUl.height()){
        $minUl = $(elem);
      }
    });
    return $minUl;
  }
})
</script>
</head>
<body>
<div id="container">
  <ul class="col">
    <li><img src="201405/-1.jpg" alt=""/></li>
    <li><img src="201405/-2.jpg" alt=""/></li>
    <li><img src="201405/-3.jpg" alt=""/></li>
  </ul>
  <ul class="col">
  </ul>
  <ul class="col" style="margin-right:0">
  </ul>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div>
<div>http://www.pipipi.net/</div>
</body>
</html>

jquery随机瀑布流简单代码实例，这样的场景在实际项目中还是用的比较多的，关于jquery随机瀑布流简单代码实例就介绍到这了。

jquery随机瀑布流简单代码实例属于前端实例代码，有关更多实例代码大家可以查看。

jquery随机瀑布流简单代码实例

回复

我来回复

  • 暂无回复内容

jquery随机瀑布流简单代码实例