瀑布流 搜集-阿里云开发者社区

开发者社区> 最美的回忆> 正文

瀑布流 搜集

简介:
+关注继续查看

参考网站:

各种优秀插件:http://www.w3cplus.com/resources/create-dynamic-grid-layouts-like-pinterest.html

masonry.js官网    http://masonry.desandro.com/

query.infinitescroll.js滚动官网      http://www.infinite-scroll.com/

blog:   http://css100.net/247.html

    http://www.wufangbo.com/?s=%E7%80%91%E5%B8%83%E6%B5%81

    http://www.niumowang.org/javascript/jquery-masonry/

瀑布流排版-jquery.masonry.min.js使用说明   http://blog.csdn.net/axer0811/article/details/8966375

无限滚动条-jquery.infinitescroll.js使用说明  http://blog.csdn.net/axer0811/article/details/8965872

瀑布流与无限滚动条一起使用,双剑合璧     http://blog.csdn.net/axer0811/article/details/8968364

 瀑布流

注:jquery.masonry.js 和 masonry官网的 masonry.pkgd.min.js  有区别,参数写法不同。  经测试masonry.pkgd.min.js貌似不支持ie6,jquery.masonry.js支持ie6.

复制代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>瀑布流</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body{background:#888;}
img{border:0;}
.all{
    width: 980px;padding-top: 10px;overflow: hidden;margin:0 auto;
}
.all{
    width: 980px;overflow: hidden;margin-top: 10px;margin-bottom: 20px;
}
.all ul{
    width: 980px;overflow: hidden;
}
.all ul li{
    overflow: hidden;background: #fff;width: 230px;margin-bottom: 13px;
}
.all ul li a{
    width: 230px;display: block;text-align: center;overflow: hidden;white-space: nowrap;font-size: 14px;font-weight: bold;color: #444;
}
.all ul li a:hover{
    color: #e903d5;
}
.all ul li img{
    width: 230px;display: block;margin-bottom: 8px;
}
.all ul li p{
    padding: 6px 12px 10px;line-height: 20px;color: #666;
}
</style>
</head>
<body>
    
    <!--all-->
    <div class="all">
        <ul id="container">
            <li class="cell">
                <a href=""><img src="http://www.5wants.cc/WEB/File/U3325P704T93D1661F3923DT20090612155225.jpg" alt="">周迅天雷滚滚的[杀马特]发型</a>
                <p>沙宣邀请周迅拍摄造型大片,演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型,雷人还是前卫,你怎么看?</p>
            </li>
            <li class="cell">
                <a href=""><img src="http://img6.3lian.com/c23/desk2/8/30/015.jpg" alt="">周迅天雷滚滚的[杀马特]发型</a>
                <p>沙宣邀请周迅拍摄造型大片,演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型,雷人还是前卫,你怎么看?</p>
            </li>
            <li class="cell">
                <a href=""><img src="http://pic3.nipic.com/20090624/1736432_095154043_2.jpg" alt="">周迅天雷滚滚的[杀马特]发型</a>
                <p>沙宣邀请周迅拍摄造型大片,演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型,雷人还是前卫,你怎么看?</p>
            </li>
            <li class="cell">
                <a href=""><img src="http://pic4.nipic.com/20091118/3047572_163357006682_2.jpg" alt="">周迅天雷滚滚的[杀马特]发型</a>
                <p>沙宣邀请周迅拍摄造型大片,演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型,雷人还是前卫,你怎么看?</p>
            </li>
            <li class="cell">
                <a href=""><img src="http://pic16.nipic.com/20110918/3695685_111553630159_2.jpg" alt="">周迅天雷滚滚的[杀马特]发型</a>
                <p>沙宣邀请周迅拍摄造型大片,演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型,雷人还是前卫,你怎么看?</p>
            </li>
            <li class="cell">
                <a href=""><img src="http://pic12.nipic.com/20110106/5333434_211406155000_2.jpg" alt="">周迅天雷滚滚的[杀马特]发型</a>
                <p>沙宣邀请周迅拍摄造型大片,演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型,雷人还是前卫,你怎么看?</p>
            </li>
            <li class="cell">
                <a href=""><img src="http://img.tom61.com/down/bizhi/099/04.jpg" alt="">周迅天雷滚滚的[杀马特]发型</a>
                <p>沙宣邀请周迅拍摄造型大片,演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型,雷人还是前卫,你怎么看?</p>
            </li>
            <li class="cell">
                <a href=""><img src="http://pica.nipic.com/2007-07-19/20077191851181_2.jpg" alt="">周迅天雷滚滚的[杀马特]发型</a>
                <p>沙宣邀请周迅拍摄造型大片,演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型,雷人还是前卫,你怎么看?</p>
            </li>
            <li class="cell">
                <a href=""><img src="http://pic16.nipic.com/20110820/4725838_184614929000_2.jpg" alt="">周迅天雷滚滚的[杀马特]发型</a>
                <p>沙宣邀请周迅拍摄造型大片,演绎从代表几何主义发型的“五点式”到浪漫嬉皮“面纱“再到狂野朋克“Kabuki”经典发型,雷人还是前卫,你怎么看?</p>
            </li>
        </ul>
    </div>    
    <!--all end-->


</body>
</html>

<script type="text/javascript" src="js/jQuery.v1.8.3-min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript" >
$(function(){
    //瀑布流
    var $container = $('#container');
    // initialize
    $container.masonry({
        columnWidth: 243,
        itemSelector: '.cell',
        isAnimated:true
    });
    // initialize Masonry after all images have loaded  
    $container.imagesLoaded( function() {
        $container.masonry();
    });
})
</script>
复制代码

图片高度BUG修正:

      由于网络传输的速度问题,当浏览器加载了dom,但是img图片还没有加载完毕,这个插件在计算图片高度和定位的时候,就会出错,在firefox和chrome中最为明显,尤其是google chrome.
原因:
在chrome浏览器下测试,在图片加载过程中,img的宽度和高度均为0,而在IE下,则浏览器先给img设定了宽度和高度,所以这个插件在IE下使用正常,但在chrome会出错。而这个插件看了官方的image demo也是如此,box层并没有动态生成一个高度值把布局撑开。


解决办法就是先让所有的图片加载完毕,才执行一次masonry()方法。

代码如下:

复制代码
<script> 
var $img=$('.container img');  
var imgCount=$img.length;  
$img.load(function(){  
imgCount--;  
if(imgCount==0){$('.container').masonry();}  
});  
</script> 
复制代码

或者使用它自带的方法imagesLoaded

复制代码
var $container = $('#container');  
 
$container.imagesLoaded( function(){  
  $container.masonry({  
    itemSelector : '.cell' 
  });  
}); 
复制代码

 

当然了,这样子的话,在加载图片的时候,你会先看到图片简单的排列而已,没有砖块瀑布流的效果,只有当所有图片加载完成后才会出现砖块效果。所以,至于以上代码加不加,就要考虑你的网站的访问速度了!

 

瀑布流的无限加载

结合jquery.infinitescroll.js使用   jquery.infinitescroll.js原理大概就是通过ajax不断请求后面的数据,然后填充到后面

无限滚动条-jquery.infinitescroll.js使用说明  http://blog.csdn.net/axer0811/article/details/8965872

瀑布流与无限滚动条一起使用,双剑合璧     http://blog.csdn.net/axer0811/article/details/8968364

网上找的demo   http://pan.baidu.com/s/1ksdEd

本文转自挨踢前端博客园博客,原文链接http://www.cnblogs.com/duanhuajian/p/3465826.html如需转载请自行联系原作者


@挨踢前端

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6359 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
3956 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7580 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
9307 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
10711 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
2901 0
1698
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载