当前位置:首页 > 开发 > Web前端 > Jquery > 正文

Jquery简单瀑布流代码示例. 仿开心网,蘑菇街.

发表于: 2012-07-19   作者:362217990   来源:转载   浏览:
摘要:   最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例。 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www
  最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例。

需要用到Jquery,jquery.masonry.min.js





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="美女图片 - WWW.MN606.COM" />
<title>Masonry 瀑布流效果 - 美女图片</title>
<style type="text/css">
body{background:#eee;font-size:12px;font-family:"宋体";color:#333p;}
body,html,p,ul,li,dl,dt,dd,ol,h1,h2,h3,h4,h5{margin:0;padding:0;}
ul li{list-style:none;}
a{text-decoration: none;background-color: none}
a:hover{text-decoration: none;}
#page{ width:960px;  margin:0 auto; }
#main{background:#FFF;height: 590px; float:left; width:960px;}
.item{  border:1px solid #EEE;float: left;display: inline;padding: 10px;margin: 10px 0px 0 14px;position: relative;}
.item img{border: none;}
</style>
</head>
<!-- 
《瀑布流效果》
作者:Swiing

-->
<body>
<div id="page">
  <div id="main">
    <div class="item">
      <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820573960309.jpg"   /></a>
      </div>
    <div class="item">
      <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/17/200_200/2012071701021504380.jpg"   /></a>
    </div>
      <div class="item">
      <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/11/200_200/2012071100572176412.jpg"  /></a>
    </div>
    <div class="item">
      <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820231163974.jpg"   /></a>
    </div>
    <div class="item">
      <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/17/200_200/2012071701004194456.jpg"   /></a>
    </div>
  
     <div class="item">
      <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820190205402.jpg"  /></a>
    </div>
     <div class="item">
      <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/11/200_200/2012071100572176412.jpg"  /></a>
    </div>
    <div class="item">
      <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820573960309.jpg"   /></a>
    </div>
    <div class="item">
      <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820501119382.jpg"   /></a>
    </div>
    <div class="item">
      <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/17/200_200/2012071701021504380.jpg"   /></a>
    </div>
    <div class="item">
      <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820231163974.jpg"   /></a>
    </div>
    <div class="item">
      <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/17/200_200/2012071701004194456.jpg"   /></a>
    </div>
    <div class="item">
       <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820501119382.jpg"   /></a>
    </div>
     <div class="item">
      <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820190205402.jpg"  /></a>
    </div>
     <div class="item">
      <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/11/200_200/2012071100572176412.jpg"  /></a>
    </div>
    <div class="item">
      <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820573960309.jpg"   /></a>
      </div>
    <div class="item">
      <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/17/200_200/2012071701021504380.jpg"   /></a>
    </div>
    <div class="item">
      <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820231163974.jpg"   /></a>
    </div>
    <div class="item">
      <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/17/200_200/2012071701004194456.jpg"   /></a>
    </div>
    <div class="item">
       <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820501119382.jpg"   /></a>
    </div>
     <div class="item">
      <a href="http://www.mn606.com/">
      <img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820190205402.jpg"  /></a>
    </div>
  </div>
</div>
</body>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.masonry.min.js"></script>
<script>
  $(function(){
    var $container = $('#main');
    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.item'
      });
    });
  });
</script>
</html>


Jquery简单瀑布流代码示例. 仿开心网,蘑菇街.

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
我们还是来看一款示例:(蘑菇街) 看起来很像我们的gridview吧,不过又不像,因为item大小不固定的
我们还是来看一款示例:(蘑菇街) 看起来很像我们的gridview吧,不过又不像,因为item大小不固定的
首先我们还是来看一款示例:(蘑菇街) 看起来很像我们的gridview吧,不过又不像,因为item大小不固
我们还是来看一款示例:(蘑菇街) 看起来很像我们的gridview吧,不过又不像,因为item大小不固定的
首先我们还是来看一款示例:(蘑菇街) 看起来很像我们的gridview吧,不过又不像,因为item大小不固
我们还是来看一款示例:(蘑菇街) 看起来很像我们的gridview吧,不过又不像,因为item大小不固定的
我们还是来看一款示例:(蘑菇街) 看起来很像我们的gridview吧,不过又不像,因为item大小不固定的
之前看到用线性布局写的瀑布流,觉得不大好,自己想了另外一种方案, (最近发现用 网页实现瀑布流
我在gitHub里开了一个项目,方便大家获取代码 https://github.com/dodola/android_waterfall 已使用
我是在www.thinksns.com又过一年微博开发经验的php资深程序员 有需要的朋友请联系 QQ:601046124 价
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号