// itemY[i]) {
minCol = i;
minH = itemY[i];
}
}
/*设置样式*/
$(value).css({
'left': pad + (pad + itemWidth) * minCol,
'top': itemY[minCol] + pad
});
/*设置完这个元素的TOP属性之后，要将数组中存储的参照值重置*/
itemY[minCol] = itemY[minCol] + pad + itemH;
}
});
/*计算整个items的高度*/
var maxCol = 0;
var maxH = itemY[maxCol];
for (var i = 1; i < itemY.length; i++) {
if (maxH < itemY[i]) {
maxCol = i;
maxH = itemY[i];
}
}
$(".items").height(maxH + pad);
}, 100);
}
// ]]>//
' + name + ' '
}
$(".items").append(html);
showCeleName();
ProductPop(page);
$("#show-area ul").append(html);
var isMobile = navigator.userAgent.match(/mobile/i);
if (isMobile) {
waterFall($(".items"), {
padding: 10,
col: 2
});
} else {
waterFall($(".items"), {
padding: 10,
col: 4
});
}
/*将当前页码存储$(".loadMore")中*/
$(".loadMore").pageIndex = page;
$(".loadMore").attr('pageIndex', page);
var totalCount = result.count;
var pageMax = Math.ceil(totalCount / 16);
if (page > pageMax) {
$(".loadMore").hide();
return false;
}
},
/*complete:不管加载成功或者是失败都会触发这个回调*/
complete: function () {
$(".loadMore").removeClass("loading");
}
})
}
loadData(1);
/*点击加载更多数据*/
$(".loadMore").on("click", function () {
var index = $(this).attr('pageIndex');
index++;
loadData(index);
});
/*滚动加载数据*/
$(window).on("scroll", function () {
var itemsTop = $(".items").offset().top;
var itemsH = $(".items").height();
var windowTop = $(window).scrollTop();
var windowH = $(this).height();
if (itemsTop + itemsH - windowTop - windowH < 100 && !$(".loadMore").hasClass('loading')) {
var index = $(".loadMore").attr('pageIndex');
index++;
loadData(index);
}
})
/*浏览器容器变化瀑布流布局自动更新*/
$(window).on("resize", function () {
/*瀑布流是来实现元素布局的，不是用来拿数据的
* 意味着当屏幕大小变化的时候，没有必要重新发送请求获取数据，只需要将当前所有元素的布局重新计算*/
var isMobile = navigator.userAgent.match(/mobile/i);
if (isMobile) {
waterFall($(".items"), {
padding: 10,
col: 2
});
} else {
waterFall($(".items"), {
padding: 10,
col: 4
});
}
});
// 鼠标移入显示网红名称
function showCeleName(params) {
$(".item").hover(function () {
$(this).find(".cele_name").removeClass("name_hide");
$(this).find(".cele_name").addClass("name_show");
}, function () {
$(this).find(".cele_name").addClass("name_hide");
$(this).find(".cele_name").removeClass("name_show");
})
}
// 产品弹窗轮播图
function ProductPop(page) {
$(".item").on("click", function () {
var isMobile = navigator.userAgent.match(/mobile/i);
if (isMobile) {
$("#show-area ul .item").width($(document).width());
}
var _index = $(this).index();
$(".fancybox_bg").addClass("bg_show");
document.documentElement.style.overflow = "hidden";
getProId(_index);
lunboPop(_index);
Change(_index);
HideProd();
})
}
// 根据产品id获取对应产品记录
function getProId(valIndex) {
var pro_id = $(".pro_id").eq(valIndex).val();
console.log(pro_id)
$.ajax({
type: "post",
dataType: "json",
dataType: "json",
url: "https://custom.aporro.com/web/Home/AporroApi/celebrityHomeProduct",
cache: false,
data: {
"pro_id": pro_id,
},
success: function (data) {
console.log(data);
$("#show-area ul .item").eq(valIndex).find(".pro_ul").html("");
$("#show-area ul .item").eq(valIndex).find(".pro_ul").append('
');
}
})
}
// 关闭轮播图弹窗
function HideProd() {
$(".fancybox_bg").on("click", function (event) {
var offClose = $(".lunbo");
if (!offClose.is(event.target) && offClose.has(event.target).length === 0) {
$(".fancybox_bg").removeClass("bg_show");
document.documentElement.style.overflow = "auto";
// $("#show-area ul").html("");
}
})
$(".close_pop").on("click", function (event) {
$(".fancybox_bg").removeClass("bg_show");
document.documentElement.style.overflow = "auto";
})
}
function lunboPop(currentIndex) {
var imgtotal = $("#show-area ul .item").length;
var autoPlayIndex = 0;
var imgwidth = $("#show-area ul .item").width();//获取第一个li的长度用作动画切换效果
var showUl = imgtotal * imgwidth;
$("#show-area ul").css("width", showUl);
//通过循环更具图片数量自动添加控制按钮方便以后后台上传图片所用
for (var i = 0; i < imgtotal; i++) {
$("#controler").append("
" + "
");
};
// $("#controler div").eq(0).addClass("onclick");
// $("#controler div").each(function () {
// $(this).click(function () {
// autoPlayIndex = $(this).index();//为模拟点击索引值赋值
// Change(this);
// });
// });
$(".nex_nav").click(function () {
currentIndex++;
if (currentIndex > imgtotal - 1) {
currentIndex = imgtotal - 1;
}
Change(currentIndex);
getProId(currentIndex);
})
$(".pre_nav").click(function () {
currentIndex--;
if (currentIndex < 0) {
currentIndex = 0;
}
Change(currentIndex);
getProId(currentIndex);
})
}
function Change(currentIndex) {
var imgtotal = $("#show-area ul .item").length;
var autoPlayIndex = 0;
var imgwidth = $("#show-area ul .item").width();//获取第一个li的长度用作动画切换效果
var showUl = imgtotal * imgwidth;
$("#show-area ul").css("width", showUl);
$(„#show-area ul“).animate({ left: -currentIndex * imgwidth }, 0);//这里就是切换的部分了当我按地一个按钮的时候它的左属性是没有变化的，而当我按第二个按钮的时候（第二个按钮的索引值是1）ul 的left属性就会减少第1个图片的宽度也就是向左面缩800px，这样第二张图片就显示出来啦，之后的也是如此，这就是为什么要设置ul 属性为relative的意义，并且ul 里面的 li 也要设置为左浮动这样才会有效果
}
});
// ]]>
