28.JavaScript實現簡單的圖片瀑布流插件

JavaScript實現簡單的圖片瀑布流插件html

this.myPlugin = this.myPlugin || {}; /** * 製做圖片瀑布流 */
this.myPlugin.createImgWaterfall = function (option) { var defaultOption = { minGap: 10, //最小間隙
        imgSrcs: [], //存儲圖片路徑的數組
        imgWidth: 200, //單張圖片的寬度
        container: document.body //存儲圖片瀑布流的容器
 }; //將傳入的參數option和默認的配置defaultOption合併
    option = Object.assign({}, defaultOption, option); var imgs = []; //存放全部的圖片元素的數組

    //處理父元素
 handleParent(); //建立圖片元素
 createImgs(); //將setImgPosition設置爲防抖函數，
    //全部的圖片加載完成後，隔一段時間執行setImgPosition函數
    var viewDebounce = debounce(setImgPosition, 300); window.onresize = viewDebounce; //瀏覽器視口尺寸改變，則從新設置圖片位置信息

    /** * 檢查父元素是不是定位元素 * 不是定位元素，要轉變爲定位元素 */
    function handleParent() { var style = getComputedStyle(option.container); if (style.position === "static") { //沒有定位
            option.container.style.position = "relative"; //使用相對定位
 } } /** * 爲每一張圖片建立一個img元素 * 而且設置img元素的樣式 */
    function createImgs() { var imgDebounce = debounce(setImgPosition, 300); for (var i = 0; i < option.imgSrcs.length; i++) { var img = document.createElement("img"); img.src = option.imgSrcs[i]; //設置圖片路徑
            img.style.width = option.imgWidth + "px"; //設置圖片寬度
            img.style.position = "absolute"; //設置圖片絕對定位
            img.style.transition = ".5s"; //設置圖片過渡時間
 imgs.push(img); img.onload = imgDebounce; //等圖片加載完畢，設置圖片位置信息
            option.container.appendChild(img); //加入圖片容器
 } } /** * 設置每一個圖片元素的位置信息 */
    function setImgPosition() { //獲取圖片的水平信息
        var info = getHorizontalInfo(); console.log(info); var arr = new Array(info.imgNum); //存放下一行，每張圖片的top值
        arr.fill(0); //數組各項值填充爲0
        imgs.forEach(function (img) { //設置每張圖片的位置信息
            var minTop = Math.min.apply(null, arr); //找到數組中最小的top值
            img.style.top = minTop + "px"; //設置圖片的top值
            var index = arr.indexOf(minTop); //找到數組中最小值的下標
            arr[index] += img.clientHeight + info.gap; //設置下張圖片的top值
            img.style.left = index * (option.imgWidth + info.gap) + "px"; //設置圖片的left值
 }); //全部圖片位置設置好後，計算容器最終的高度
        var maxTop = Math.max.apply(null, arr); //找到最大的top值
        option.container.style.height = maxTop - info.gap + "px"; } /** * 獲取圖片的水平信息，包括 * 容器寬度:填充盒 * 一行能夠放置圖片的數量 * 圖片與圖片之間的水平和垂直空隙 */
    function getHorizontalInfo() { var obj = {}; obj.containerWidth = option.container.clientWidth; //存放圖片容器的寬度
        //imgWidth*imgNum + minGab*(imgNum - 1) = containerWidth;
        //圖片寬度 * 圖片數量 + 圖片間的最小間隙*(圖片數量-1) = 容器總寬度
        //根據上面的公式變形後，獲得一行能夠放置的圖片數量
        obj.imgNum = (obj.containerWidth + option.minGap) / (option.imgWidth + option.minGap); obj.imgNum = Math.floor(obj.imgNum); //圖片數量要向下取整
        //圖片之間的間隙 = (容器總寬度 - 圖片寬度*圖片數量) / (圖片數量 - 1)
        obj.gap = (obj.containerWidth - option.imgWidth * obj.imgNum) / (obj.imgNum - 1); return obj; } /** * 函數防抖，過一段時間後，執行某個函數 */
    function debounce(callback, time) { var timer = null; //計時器
 console.log(timer); return function () { console.log(timer); timer && clearTimeout(timer); //每次執行，從新計時
            var args = arguments; timer = setTimeout(function () { callback.apply(null, args); }, time); } } };

myPlugin.js

功能：數組

1).能夠自動根據瀏覽器視口寬度，改變圖片瀑布流的寬度瀏覽器

2).添加了函數防抖功能app

調用圖片瀑布流插件：ide

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> .container { border: 1px solid #000; width: 90%; margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="container">

    </div>
    <script src="./js/myPlugin.js"></script>
    <script>
        var imgSrcs = []; for(var i = 1; i <= 40; i++){ imgSrcs.push(`./image/${i}.jpg`); } myPlugin.createImgWaterfall({ imgSrcs: imgSrcs, container: document.querySelector(".container") //存儲圖片瀑布流的容器
 }); </script>
</body>

</html>

index.html

使用了40張圖片的圖片最後的效果函數