瀑布流蒐集

時間 2019-11-20

標籤瀑布蒐集欄目悠閒生活简体版

原文原文鏈接

參考網站：javascript

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

masonry.js官網 http://masonry.desandro.com/css

query.infinitescroll.js滾動官網 http://www.infinite-scroll.com/html

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

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

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

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

無限滾動條-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.dom

<!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.w3cplus.com/resources/create-dynamic-grid-layouts-like-pinterest.html

瀑布流

圖片高度BUG修正：

瀑布流的無限加載

瀑布流蒐集