我們在做需要展示大量圖片的網站時口锭，為了減少網絡壓力类嗤、提升用戶體驗祈餐，通常會對圖片進行懶加載處理，所以歸納整理一下圖片懶加載的原理及代碼，瀑布流其實也是懶加載的一種特殊處理展示的方式才避，一并記錄橱夭。
懶加載
圖片懶加載的核心思路其實就是將圖片的真實src放置在另一個屬性中，使用js加以判斷圖片的是否出現(xiàn)在視窗內：
$node.offset().top <= $(window).height() + $(window).scrollTop()
預留一定的滾動距離桑逝，圖片即將出現(xiàn)在視窗內時將真實的src屬性替換進去進行加載棘劣。
為了避免已經進行替換過的圖片重復進行操作，可以在屬性中添加特征值楞遏，檢測到特征值存在時不予操作：
<img src="" alt="" data-loaded="1" data-src="">
start()
$(window).on('scroll',function(){
start()
})
function start(){
$('container img').not([data-loaded]).each(function(){
var $node = $(this)
if (isShow($node)){
setTimeout(function(){
loadImg($node)
},500)
}
})
}
function isShow($ndoe){
return $node.offset().top <= $(window).top() + $(window).scrollTop()
}
function loadImg($img){
$img.attr('src',$img.attr('data-src'))
$img.attr('data-loaded','loaded')
}
瀑布流
使用瀑布流布局展示 要考慮窗口自適應問題 所以首要問題就是確定每行展示元素的數(shù)量
var colCount
var imgWidth = $('.waterfall img').outerWidth(true) //考慮元素的padding和margin
colCount = Math.floor($('.waterfall').width()/imgWidth)
使用數(shù)組存儲每列高度茬暇，新元素設置position:absoulte，left值設置為數(shù)組中最小值寡喝。
