问答详情
源自:3-2 jQuery实现瀑布流布局的图片加载功能

为什么我的图片没有加载出来

$(window).on('load',function () {

waterfall();

var dataInt = {"data":[{"scr":"0.jpg"},{"scr":"1.jpg"},{"scr":"2.jpg"},{"scr":"3.jpg"}]};

$(window).on('scroll',function(){

if (checkScrollSlide)

{

$.each(dataInt.data,function (key,value) {

var oBox = $('<div>').addClass('box').appendTo($('#main'));

var oPic = $('<div>').addClass('pic').appendTo($(oBox));

var oImg = $('<img>').attr('src','images/'+$(value).attr('src')).appendTo($(oPic));

}) 

waterfall();

}

})

})


function waterfall() {

var $boxs = $('#main>div');

var w = $boxs.eq(0).outerWidth();

var cols = Math.floor($(window).width()/w);

$('#main').width(w*cols).css('margin','0 auto');

var hArr = [];

$boxs.each(function (index,value) {

var h = $boxs.eq(index).outerHeight();

if (index < cols) {

hArr[index] = h;

} else {

var minH = Math.min.apply(null,hArr);

var minHIndex = $.inArray(minH,hArr);

$(value).css({

'position':'absolute',

'top':minH + 'px',

'left':minHIndex*w + 'px'

})

hArr[minHIndex]+=$boxs.eq(index).outerHeight();


}

})



}


function checkScrollSlide() {

var $lastBox = $('#mian>div').last();

var lastBoxDis = $lastBox.offset().top+Math.floor($lastBox.outerheight()/2);

var scrollTop = $(window).scrollTop();

var documentH = $(window).height();

return (lastBoxDis<scrollTop+documentH)?true:false;

}









提问者:qq_轮滑到老_04284587 2018-08-17 09:59

个回答

  • Richard_Li
    2018-08-18 11:16:14

    你看看的你的dataInt...