瀑布流搜集

参考网站：

各种优秀插件：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

posted on 2013-12-13 17:16 挨踢前端阅读(1263) 评论(0) 编辑收藏举报

刷新页面返回顶部

Hello World