花瓣网项目

今天所说的就是js中我所学的项目:

一个花瓣网网页,将所学的js知识都运用在里面,

如上就是所做的效果图,它总共就这些板块来搭建此页面,

将其样式都一笔带过。

用js来做的就是这几个方面,将其网页页面撑起。

1:主要的就是页面中的好多图片的滚动,瀑布流滚动页面,

这地方就需要用js中所学的瀑布流知识来做,

/**
 *自动创建图片
 */
function  autoCreateImg() {
    //1.1 数据
    var json=[
        {txt: '当我们正在为生活疲于奔命的时候,生活已经离我们而去。——约翰·列侬', pic: 'images/0.jpg'},
        {txt: '活在世上,不必什么都知道,只知道最好的就够了。——王小波', pic: 'images/1.jpg'},
        {txt: '世界上任何书籍都不能带给你好运,但是它们能让你悄悄变成你自己。——黑塞', pic: 'images/2.jpg'},
        {txt: '很多人不需要再见,只是路过而已。——《彼岸花》', pic: 'images/3.jpg'},
        {txt: '人生最困难的三件事:保守秘密,忘掉所受的创伤,充分利用余暇。——吉罗', pic: 'images/4.jpg'},
        {txt: '有些人是离开后,才会发觉那个人是最喜欢的。——《东邪西毒》', pic: 'images/5.jpg'},
        {txt: '我总是在日暮时分,书影与书影之间,宁静的悲哀里,最想念你。——亦舒', pic: 'images/6.jpg'},
        {txt: '再长的路,一步步地能走完,再短的路,不迈开双脚也无法到达。', pic: 'images/7.jpg'},
        {txt: '哪里会有人喜欢孤独,不过是不喜欢失望。——村上春树', pic: 'images/8.jpg'},
        {txt: '人时已尽,人世很长,我在中间,应当休息。——顾城', pic: 'images/9.jpg'},
        {txt: '信任的深浅,不在于会不会对你笑,而在于愿不愿意在你面前哭。', pic: 'images/10.jpg'},
        {txt: '有一种旅行,不为跋涉千里的向往,只为漫无目的的闲逛,不为人山人海的名胜,只为怡然自乐的街景...', pic: 'images/11.jpg'},
        {txt: '人都会孤独,但唯独他,可以越过这尘世的热闹,一眼明白这世间所有的繁华不过是他身边的过眼云烟。', pic: 'images/12.jpg'},
        {txt: '不乱于心,不困于情。不畏将来,不念过往。如此,安好。', pic: 'images/13.jpg'},
        {txt: '每一个人都需要这样一个朋友:当以为自己再也笑不出来的时候,他能让你开怀大笑!', pic: 'images/14.jpg'},
        {txt: '咖啡苦与甜,不在于怎么搅拌,而在于是否放糖;一段伤痛,不在于怎么忘记,而在于是否有勇气重新开始。', pic: 'images/15.jpg'},
        {txt: '其实我不是一定要等你,只是等上了,就等不了别人了。——《朝露若颜》', pic: 'images/16.jpg'},
        {txt: '一切都是瞬间,一切都会过去,一切过去了的都会变成亲切的怀念。——普希金', pic: 'images/17.jpg'},
        {txt: '多少人曾爱慕你年轻时的容颜,可知谁愿承受岁月无情的变迁', pic: 'images/18.jpg'},
        {txt: '不在任何东西面前失去自我,哪怕是教条,哪怕是别人的目光,哪怕是爱情。——《成为简·奥斯汀》', pic: 'images/19.jpg'},
        {txt: '你如果认识从前的我,也许你会原谅现在的我。——张爱玲', pic: 'images/20.jpg'},
        {txt: '简约不是少,而是没有多余。足够也不是多,而是刚好你在。', pic: 'images/21.jpg'},
        {txt: '若只是喜欢 何必夸张成爱。——林夕', pic: 'images/22.jpg'},
        {txt: '梦里出现的人,醒来时就该去见她,生活就是这么简单。——《新桥恋人》', pic: 'images/23.jpg'},
        {txt: '与众不同的你是幸运的,何必让自己变得与别人一样。', pic: 'images/24.jpg'},
        {txt: '阳光温热,岁月静好,你还不来,我怎敢老。', pic: 'images/25.jpg'},
        {txt: '一个人知道自己为什么而活,就能忍受任何生活。——尼采', pic: 'images/26.jpg'},
        {txt: '我们已经出发了太久,以至于我们忘了为什么要出发。——纪伯伦', pic: 'images/27.jpg'},
        {txt: '水来,我在水中等你;火来,我在灰烬中等你。——《你是我的独家记忆》', pic: 'images/28.jpg'},
        {txt: '天下就没有偶然,那不过是化了妆的,戴了面具的必然。——钱钟书', pic: 'images/29.jpg'}
    ], str, txt, pic, htmlStr;

    //1.2 遍历
    for (var i=0;i<30;i++){
        //1.2.0 获取父标签的文本
      str=$("dom_pull").innerHTML;

        //1.2.1取出图片的地址和文字
        txt=json[i].txt;
        pic=json[i].pic;

        //1.2.2创建字标签
        htmlStr="<div class='box'>" +
            "<div class='pic'>" +
            "<img src=" + pic + " alt=''>" +
            "<div class='cover'></div>" +
            "</div>" +
            "<p>" + txt + "</p>" +
            "<div class='btn-box'>" +
            "<a href='' class='collect'>采集</a>" +
            "<a href='' class='like'>" +
            "<span class='heart'></span>" +
            "</a></div></div>";

        //1.2.3拼接{
        str +=htmlStr;
        $("dom_pull").innerHTML=str;

        //1.2.4绑定事件
        var wrapBox=$("dom_pull").getElementsByTagName("box");
        var wrappic=$("dom_pull").getElementsByTagName("pic");
        for(var j=0;j<wrapBox.length;j++){
            wrapBox[j].onmouseover=function () {
                this.childNodes[2].style.display="block";
            };
            wrapBox[j].onmouseout = function () {
                this.childNodes[2].style.display = "none";
            };

            wrappic[j].onmouseover = function () {
                this.childNodes[1].style.display = "block";
            };

            wrappic[j].onmouseout = function () {
                this.childNodes[1].style.display = "none";
            }
        }

    }

}

 但是实现瀑布流布局还需我们之前所整理的代码。

/**
 * 实现瀑布流布局
 */
function waterFull(parent, child) {
    // 1. 父盒子居中
    // 1.1 获取所有的盒子
    var allBox = $(parent).getElementsByClassName(child);
    // 1.2 获取子盒子的宽度
    var boxWidth = allBox[0].offsetWidth;
    // 1.3 获取屏幕的宽度
    var screenW = document.documentElement.clientWidth;
    // 1.4 求出列数
    var cols = parseInt(screenW / boxWidth);

    var xyMargin = 16;



    // 2. 子盒子的定位
    // 2.1 定义高度数组
    var heightArr = [], boxHeight = 0, minBoxHeight = 0, minBoxIndex = 0;
    // 2.2 遍历子盒子
    for (var i = 0; i < allBox.length; i++) {
        // 2.2.1 求出每一个子盒子的高度
        boxHeight = allBox[i].offsetHeight + xyMargin;
        // 2.2.2 取出第一行盒子的高度放入高度数组
        if (i < cols) { // 第一行
            heightArr.push(boxHeight);

            allBox[i].style.position = "absolute";
            allBox[i].style.left = i * (boxWidth + xyMargin)+ 'px';
            allBox[i].style.top =  xyMargin + 'px';
        } else { // 剩余行
            // 1. 取出最矮的盒子高度
            minBoxHeight = _.min(heightArr);
            // 2. 求出最矮盒子对应的索引
            minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);
            // 3. 子盒子定位
            allBox[i].style.position = "absolute";
            allBox[i].style.left = minBoxIndex * (boxWidth + xyMargin)+ 'px';
            allBox[i].style.top = minBoxHeight +  xyMargin + 'px';
            // 4. 更新数组中的高度
            heightArr[minBoxIndex] += boxHeight;
        }
    }

    // 5. 更新父盒子的高度
    var parentHeight = allBox[allBox.length - 1].offsetTop + allBox[allBox.length - 1].offsetHeight;
    $(parent).style.height = parentHeight;
}
/**
 * 获取数组中最矮盒子高度的索引
 * @param arr
 * @param val
 * @returns {number}
 */
function getMinBoxIndex(arr, val) {
    for(var i=0; i<arr.length; i++){
        if(arr[i] === val){
            return i;
        }
    }
}
function $(id) {
    return typeof id === "string" ? document.getElementById(id) : null;
}

/**
 * 判断是否具备加载图片的条件
 */
function checkWillLoadImage() {
    // 1. 获取最后一个盒子
    var allBox = document.getElementsByClassName("box");
    var lastBox = allBox[allBox.length - 1];

    // 2. 求出最后一个盒子自身高度的一半 + offsetTop
    var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;

    // 3. 求出屏幕的高度
    var screenW = document.body.clientHeight || document.documentElement.clientHeight;

    // 4. 求出页面偏离浏览器的高度
    var scrollTop = scroll().top;

    return lastBoxDis <= screenW + scrollTop;
}


代码中的这部分就是将index.html中选项卡内的

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值