国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

原生js實(shí)現(xiàn)瀑布流及微信小程序中使用左右兩列實(shí)現(xiàn)瀑布流

imingyu / 2914人閱讀

摘要:使用實(shí)現(xiàn)瀑布流并不實(shí)用,因?yàn)閷?shí)現(xiàn)的瀑布流都是以列來排列的,這里記錄下用實(shí)現(xiàn)瀑布流,以及微信小程序中使用左右兩列來實(shí)現(xiàn)瀑布流效果圖原生實(shí)現(xiàn)瀑布流文件圖片可以自己找點(diǎn)替換下就可以了文件添加陰影的時(shí)候,加上會(huì)顯得更加有點(diǎn)懸浮感文件計(jì)算圖片列數(shù)

使用css實(shí)現(xiàn)瀑布流并不實(shí)用,因?yàn)閏ss實(shí)現(xiàn)的瀑布流都是以列來排列的,這里記錄下用js實(shí)現(xiàn)瀑布流,以及微信小程序中使用左右兩列來實(shí)現(xiàn)瀑布流
1.效果圖
2.原生js實(shí)現(xiàn)瀑布流

html文件

圖片可以自己找點(diǎn)替換下就可以了

css文件

*{
    margin: 0;
    padding: 0;
}
#root{
    position: relative;
}
.item{
    float: left;
    padding: 5px;
}
/* 添加陰影的時(shí)候,加上border會(huì)顯得更加有點(diǎn)懸浮感 */
.itemImg{
    padding: 5px;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px #ccc;
    border-radius: 5px;
}
.itemImg img{
    width: 230px;
    height: auto;
}

js文件

window.onload = function () {

    /* 計(jì)算圖片列數(shù)及獲取最小高度圖片 */
    generateImg("root", "item");

    /* 對(duì)窗口大小改變進(jìn)行監(jiān)聽,大小改變則重新布局 */
    window.addEventListener("resize", function() {
        generateImg("root", "item")
    });

    /* 圖片對(duì)象 */
    let imgData = {
        images: [
            {
                "src":"23.png"
            },
            {
                "src":"22.png"
            },
            {
                "src":"2.jpg"
            },
            {
                "src":"4.jpg"
            },
            {
                "src":"7.jpg"
            }
        ]
    };
    /* 對(duì)滾動(dòng)監(jiān)聽 */
    window.addEventListener("scroll", function() {
        if(checkIsScroll()) {
            let rootElement = document.getElementById("root");
            /* 利用documentFragment來創(chuàng)建 */
//                    let documentFragment = document.createDocumentFragment();
            let length = imgData.images.length;

            /* 循環(huán)創(chuàng)建圖片組 */
            for(let i = 0; i < length; i++) {
                let itemElement = document.createElement("div");
                itemElement.className = "item";
                rootElement.appendChild(itemElement);
                let itemImgElement = document.createElement("div");
                itemImgElement.className = "itemImg";
                itemElement.appendChild(itemImgElement);
                let itemImg = document.createElement("img");
                itemImg.style.cssText = "opacity: 0; transform:scale(0)";
                itemImg.src = "../images/" + imgData.images[i].src;
                itemImgElement.appendChild(itemImg);
//                        documentFragment.appendChild(itemElement);

                /* 在1秒后讓圖片顯示出來 */
                (function(img){
                    setTimeout(function(){
                        img.style.cssText="opacity:1;transform:scale(1)";
                    },1000);
                })(itemImg);
            }
//                    rootElement.appendChild(documentFragment);
            generateImg("root", "item");
        }
    });
};

/* 計(jì)算圖片列數(shù)及獲取最小高度圖片 */
function generateImg(parent, content) {
    /* 獲取父元素及其所以節(jié)點(diǎn)內(nèi)容 */
    let parentElement = document.getElementById(parent);
    let childContent = getChildElement(parentElement, content);

    /* 獲取圖片寬度 */
    let imgWidth = childContent[0].offsetWidth;
    /* 獲取一行圖片形成的列數(shù) */
    let imgColumn = Math.floor(document.documentElement.clientWidth / imgWidth);
    /* 重新設(shè)置父級(jí)容器的寬度 */
    parentElement.style.cssText = "width:" + imgColumn * imgWidth + "px;margin:0 auto";

    /* 存儲(chǔ)每個(gè)圖片的高度,以此來找到最小圖片高 */
    let imgHeightArray = [];
    let length = childContent.length;
    for(let i = 0; i < length; i++) {
        /* i scrollTopSpace + clientHeight) {
        return true;
    }
}
/* 獲取子節(jié)點(diǎn)的所有內(nèi)容 */
function getChildElement(parentElement, content) {
    /* 存儲(chǔ)元素信息 */
    let elementArray = [];
    /* 獲取父元素下的所有節(jié)點(diǎn)信息 */
    let allElement = parentElement.getElementsByTagName("*");
    let length = allElement.length;
    for (let i = 0; i < length; i++) {
        /* 找到對(duì)應(yīng)的類名 */
        if (allElement[i].className === content) {
            elementArray.push(allElement[i]);
        }
    }
    return elementArray;
}

/* 獲取圖片最小高度 */
function getMinImgHeight(heightArray) {
    let length = heightArray.length;
    let minHeight = heightArray[0];
    for(let i = 0; i < length; i++) {
        minHeight = Math.min(minHeight, heightArray[i]);
    }
    return minHeight;
}

/* 獲取圖片最小高度的索引值 */
function getMinHeightIndex(heightArray, minHeight) {
    let length = heightArray.length;
    for(let i = 0; i < length; i++) {
        if(heightArray[i] == minHeight) {
            return i;
        }
    }
}
3.微信小程序中實(shí)現(xiàn)瀑布流

效果圖

wxml文件


  
    
      
        
          
          {{item.title}}
        
      
    
  
  
    
      
        
          
          {{item.title}}
        
      
    
  


  

wxss文件

page{
  background: #f6f6f6;
}
/* 最外層 */
.cateCommodity {
  display: flex;
  padding: 20rpx 28rpx 8rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}
/* 左右兩個(gè)容器 */
.leftContainer{
  display: flex;
  margin-right: 22rpx;
  flex-direction: column;
}
.rightContainer{
  display: flex;
  flex-direction: column;
}
/* 圖片容器 */
.cateItem {
  margin-bottom: 20rpx;
}
.item{
  padding: 20rpx 22rpx;
  width: 335rpx;
  box-sizing: border-box;
  background: #fff;
  border-radius: 6rpx;
}
.itemImg{
  margin-bottom: 14rpx;
  width: 100%;
  vertical-align: middle;
  border-radius: 6rpx;
}
.title{
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.5;
}
/* 返回頂部 */
.skipTop {
  position: fixed;
  bottom: 30rpx;
  right: 20rpx;
  width: 90rpx;
  height: 90rpx;
}

.skipTop image {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

js文件

Page({
  data: {
    imageArray: [
      {
        id: 1,
        src: "../../images/avatar.jpeg",
        title: "現(xiàn)代新中式創(chuàng)意陶瓷簡(jiǎn)約擺件客廳家居玄關(guān)軟裝飾品家居酒柜盤子"
      },
      {
        id: 1,
        src: "../../images/avatar3.jpg",
        title: "秋冬季新款2018休閑運(yùn)動(dòng)服套裝女士韓版金絲絨衛(wèi)衣加絨加厚兩件套"
      },
      {
        id: 1,
        src: "../../images/avatar4.jpeg",
        title: "女童床上用品四件套公主房1.2m床品純棉女孩1.8兒童床單三件套1.5"
      },
      {
        id: 1,
        src: "../../images/avatar7.jpg",
        title: "嬰兒床圓床蚊帳落地款寶寶橢圓床蚊帳支架款兒童床蚊帳BB床小蚊帳"
      },
      {
        id: 1,
        src: "../../images/avatar9.jpeg",
        title: "包郵動(dòng)感158T速滑鞋輪滑鞋競(jìng)速鞋高端碳纖鞋 固定碼 專業(yè)定制"
      },
      {
        id: 1,
        src: "../../images/logo7.jpg",
        title: "Infanton落地嬰兒床蚊帳帶支架兒童床蚊帳寶寶蚊帳嬰童蚊帳"
      },
      {
        id: 1,
        src: "../../images/logo6.jpg",
        title: "老A輪滑 米高seba hl碳纖版SEBA HL CARBON 平花鞋剎車鞋全能鞋"
      },
      {
        id: 1,
        src: "../../images/logo.jpeg",
        title: "洋洋法代 sandro 17秋冬 一粒扣羊毛長(zhǎng)款大衣外套EKIN M9575H"
      },
    ],
    showTopImage: false,
  },
  onPageScroll(event) {
    /* 利用兩個(gè)條件,防止重復(fù)的進(jìn)行setData操作 */
    if (event.scrollTop > 300 && this.data.showTopImage == false) {
      this.setData({
        showTopImage: true
      })
    } else if (event.scrollTop < 300 && this.data.showTopImage == true) {
      this.setData({
        showTopImage: false
      })
    }
  },
  skipTop() {
    /* 返回頂部 */
    wx.pageScrollTo({
      scrollTop: 0,
      duration: 300
    });
    this.setData({
      showTopImage: false
    });
  },
  onReachBottom: function () {
    let temporaryArray = this.data.imageArray;
    temporaryArray.push(...this.data.imageArray);
    this.setData({
      imageArray: temporaryArray
    })
  },
})

左右兩列實(shí)現(xiàn)瀑布流其實(shí)就是對(duì)同一數(shù)組進(jìn)行了兩次渲染,只是把其中的一半給隱藏了

正在努力學(xué)習(xí)中,若對(duì)你的學(xué)習(xí)有幫助,留下你的印記唄(點(diǎn)個(gè)贊咯^_^)

往期好文推薦:

判斷iOS和Android及PC端

純css實(shí)現(xiàn)瀑布流(multi-column多列及flex布局)

實(shí)現(xiàn)單行及多行文字超出后加省略號(hào)

微信小程序之購物車和父子組件傳值及calc的注意事項(xiàng)

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/99911.html

相關(guān)文章

  • 初探uni-app框架 踩坑

    摘要:近些天有接觸到框架,使用軟件進(jìn)行編譯,能生成多端項(xiàng)目文件,如微信百度支付寶小程序及和端,記錄遇到的問題條件編譯我覺得比較突出的一點(diǎn)功能,就是這個(gè)條件編譯,指定對(duì)應(yīng)的代碼執(zhí)行在對(duì)應(yīng)的一端僅在某平臺(tái)存在除了某平臺(tái)均存在如只在微信小程序中才執(zhí)行 近些天有接觸到uni-app框架,使用HBuilderX軟件進(jìn)行編譯,能生成多端項(xiàng)目文件,如微信、百度、支付寶小程序及Android和ios端,記錄...

    neu 評(píng)論0 收藏0
  • 信小程序瀑布加載解決方案

    摘要:實(shí)際效果如下這樣就實(shí)現(xiàn)了一個(gè)微信小程序下的瀑布流。實(shí)際效果可以打開微信,掃描左邊二維碼,直接體驗(yàn)。或者微信小程序搜索拍照大全。 1、什么是瀑布流 1.1、瀑布流,又稱瀑布流式布局。是比較流行的一種網(wǎng)站頁面布局,圖片的寬度是固定的,高度自動(dòng)。視覺表現(xiàn)為參差不齊的多列布局,隨著頁面滾動(dòng)條向下滾動(dòng),這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。 2、h5下實(shí)現(xiàn)一個(gè)瀑布流的基本思路 2.1、定義...

    AlphaWatch 評(píng)論0 收藏0
  • 信小程序瀑布加載解決方案

    摘要:實(shí)際效果如下這樣就實(shí)現(xiàn)了一個(gè)微信小程序下的瀑布流。實(shí)際效果可以打開微信,掃描左邊二維碼,直接體驗(yàn)。或者微信小程序搜索拍照大全。 1、什么是瀑布流 1.1、瀑布流,又稱瀑布流式布局。是比較流行的一種網(wǎng)站頁面布局,圖片的寬度是固定的,高度自動(dòng)。視覺表現(xiàn)為參差不齊的多列布局,隨著頁面滾動(dòng)條向下滾動(dòng),這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。 2、h5下實(shí)現(xiàn)一個(gè)瀑布流的基本思路 2.1、定義...

    kumfo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<