jq瀑布流

時間 2019-11-08

標籤瀑布欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>

<head>

<title>JavaScript瀑布流</title>

<style>

* {

margin: 0;

padding: 0;

position: relative;

}

img {

width: 220px;

display: block;

}

.item {

box-shadow: 2px 2px 2px #999;

position: absolute;

}

#box {

margin: 10px auto 10px auto;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

Mock.mock(/server/, 'get', function () {

let arr = [];

// 經過for循環返回30張圖片

for (let i = 0; i < 30; i++) {

let randomNum = Math.floor(Math.random() * 98); // 圖片一共98張

let str = `./images/${randomNum}.jpg`; // 組成相應的字符串

arr.push(str);

}

return arr;

});

let gap = 10;

$(document).ready(function () {

waterFall();

function waterFall() {

// 獲取元素

let items = $(".item");

let pageWidth = $(window).width()//獲取頁面寬度

let itemWidth = $(".item").eq(0).innerWidth()

// console.log(itemWidth)

let columns = parseInt($(window).width() / ($(".item:first").width() + gap));

// console.log(`woshi${columns}`)

$("#box").css({

"width": columns * ($(".item:first").width() + gap),

});

// console.log(`woshi${$("#box").css("width")}`)

let arr = [];

for (let i = 0; i < items.length; i++) {

// 第一行

if (i < columns) {

items.eq(i).css({

"top": 0,

"left": (itemWidth + gap) * i,

});

arr.push(items.eq(i).height());

} else {

// 不是第一行

let minHeight = Math.min(...arr);

let index = 0;

for (let j = 0; j < arr.length; j++) {

if (minHeight === arr[j]) {

index = j;

}

items.eq(i).css({

"left": $(".item").eq(index).offset().left - $("#box").offset().left,

"top": arr[index] + gap

});

arr[index] = arr[index] + items.eq(i).height() + gap;

// console.log(arr[index])

}

// 生成新數據

$(window).scroll(function () {

// console.log($(window).innerHeight())

if ($(window).height() + $(window).scrollTop() >= $(".item:last").offset().top) {

// alert(123)

$.ajax({

url: './server.js',

type: 'get',

success: function (data) {

// 在回調函數裏面進行數據的處理

data = JSON.parse(data);

for (let i = 0; i < data.length; i++) {

$(` <div class="item">

</div>`).appendTo($("#box"))

}

});

}

waterFall();

});

// 監聽

$(window).resize(function () {

waterFall();

// alert(123)

})

});

</script>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。