技术帮
 

瀑布流插件 -- salvattore

本网站内容基本都是原创作品,未得到作者同意也欢迎转载
转载请注明出处:技术帮
说你呢,赶紧长按二维码,然后点击识别图中二维码

任何技术难题可进QQ群提问:【小崔说编程
对于提问的原则是:没有你不能问的,只有我不会答的

1472955908895017376.png说两句


今天是腊八,腊月初八。老辈子腊八这天会把家里的粮食柜子翻出来,把各种谷物豆类都凑到一起熬粥,其实也不一定是8种,总是自己喜欢什么口味就放什么东西,样数不厌其繁,多多益善,在文火上直熬3个小时才喝,非常的好喝。

以前这一天是生意人一年封账的时候,把账目算清楚,债主会通知欠债人还钱。做生意欠账不丢人,账期是由来已久的,中国三角债问题是文化,并不是坏事,其实在以前是基于人文信用体系行程的惯例。时至今日,旧的信用体系破坏了,新的体系还没建立起来,欠债就有点儿不好的意思了。其实也很正常,我的老东家现在还欠我工资没给我呢,大家还是朋友,谁都有个手长手短的时候,互相周济,莫用钱作为衡量一个人的唯一标准,那样你自己也就不纯粹了。

这一天还是释迦摩尼成道的一天,佛教进入华夏后,与民俗各种搅合,让人感觉佛很亲民。


1472955908895017376.png书归正传


昨儿在《模板爬虫 - 网页原型设计》这篇文中,将爬到的模板以瀑布流的方式展示出来了。

其中采用了瀑布流插件 -- salvattore [音标:赛欧维特] ,这里给大家简单解释一下用法。 


1473058358717068189.png 设计思想

在H5的布局中,只有流式布局,要么是块元素的独占一行,如下图:

image.png


或者是浮动的,向右排列:

image.png


而 savlattore实现的瀑布流是下面的样子。

image.png


看出区别没?容器1和容器4之间是直接排列下去的,而不因为容器3的高度,中间就会有很大的缝隙。

如果没理解,请认真看看上面三个图的区别。


那么salvattore是如何实现的呢?请看下图:

image.png

发现奥秘没?salvattore其实是动态生成了若干个div,然后将页面元素塞入其中,就实现了瀑布流了。


1472955908895017376.png用法


现在介绍一下怎么使用。

1 页面引入salvattore.js

推荐采用bootcdn作为源。

<script src="https://cdn.bootcss.com/salvattore/1.0.9/salvattore.min.js"></script>


2 将你的所有的容器都放入一个div中,这个div增加一个属性 data-columns 

<div id="fh5co-board" data-columns>

    <div class="item">
        <div class="animate-box">
            <a href="#" class="image-popup fh5co-board-img">
            <img src="http://demo.cssmoban.com/cssthemes3/ft5_11_hydrogen/images/img_1.jpg"></a>
        </div>
        <div class="fh5co-desc">一个魔幻效果的摄影网站模板<br>凡科建站 [科技]</div>
    </div>
    <div class="item">
        <div class="animate-box">
            <a href="#" class="image-popup fh5co-board-img">
            <img src="http://demo.cssmoban.com/cssthemes3/ft5_11_hydrogen/images/img_2.jpg"></a>
        </div>
        <div class="fh5co-desc">一个魔幻效果的摄影网站模板<br>凡科建站 [科技]</div>
    </div>
    <div class="item">
        <div class="animate-box">
            <a href="#" class="image-popup fh5co-board-img">
            <img src="http://demo.cssmoban.com/cssthemes3/ft5_11_hydrogen/images/img_6.jpg"></a>
        </div>
        <div class="fh5co-desc">一个魔幻效果的摄影网站模板<br>凡科建站 [科技]</div>
    </div>
    <div class="item">
        <div class="animate-box">
            <a href="#" class="image-popup fh5co-board-img">
            <img src="http://demo.cssmoban.com/cssthemes3/ft5_11_hydrogen/images/img_3.jpg"></a>
        </div>
        <div class="fh5co-desc">一个魔幻效果的摄影网站模板<br>凡科建站 [科技]</div>
    </div>
    <div class="item">
        <div class="animate-box">
            <a href="#" class="image-popup fh5co-board-img">
            <img src="http://demo.cssmoban.com/cssthemes3/ft5_11_hydrogen/images/img_4.jpg"></a>
        </div>
        <div class="fh5co-desc">一个魔幻效果的摄影网站模板<br>凡科建站 [科技]</div>
    </div>
    <div class="item">
        <div class="animate-box">
            <a href="#" class="image-popup fh5co-board-img">
            <img src="http://demo.cssmoban.com/cssthemes3/ft5_11_hydrogen/images/img_5.jpg"></a>
        </div>
        <div class="fh5co-desc">一个魔幻效果的摄影网站模板<br>凡科建站 [科技]</div>
    </div>
    <div class="item">
        <div class="animate-box">
            <a href="#" class="image-popup fh5co-board-img">
            <img src="http://demo.cssmoban.com/cssthemes3/ft5_11_hydrogen/images/img_7.jpg"></a>
        </div>
        <div class="fh5co-desc">一个魔幻效果的摄影网站模板<br>凡科建站 [科技]</div>
    </div>
    <div class="item">
        <div class="animate-box">
            <a href="#" class="image-popup fh5co-board-img">
            <img src="http://demo.cssmoban.com/cssthemes3/ft5_11_hydrogen/images/img_8.jpg"></a>
        </div>
        <div class="fh5co-desc">一个魔幻效果的摄影网站模板<br>凡科建站 [科技]</div>
    </div>

</div>


这样就可以用了,salvattore的引入和初始化非常简单。


3 自定义一个salvattore的css样式

/* Base styles */
.column {
    float: left;
}
@media screen and (max-width: 300px) {
    .column {
        float: none;
        position: relative;
        clear: both;
    }
}
.size-1of4 {
    width: 25%;
}
.size-1of3 {
    width: 33.333%;
}
.size-1of2 {
    width: 50%;
}


#fh5co-board[data-columns]::before {
    content: '4 .column.size-1of4';
    display: none;
}

/* Configurate salvattore with media queries */
@media screen and (max-width: 300px) {
    #fh5co-board[data-columns]::before {
        content: '1 .column'; 
    }
}

@media screen and (min-width: 301px) and (max-width: 700px) {
    #fh5co-board[data-columns]::before {
        content: '2 .column.size-1of2';
    }
}

@media screen and (min-width: 701px) and (max-width: 850px) {
    #fh5co-board[data-columns]::before {
        content: '3 .column.size-1of3';
    }
}

@media screen and (min-width: 851px) {
    #fh5co-board[data-columns]::before {
        content: '4 .column.size-1of4';
    }
}


上面的css解释一下:

1 目的是在不同大小的浏览器上展示不同列数的瀑布流

PC机上,展示4列,平板上3列,一般手机上2列,如果你的手机太小了,就1列了。


@media screen and (max-width: 300px) {
    .column {
        float: none;
        position: relative;
        clear: both;
    }
}

这一句是说,如果浏览器宽度小于300px的话,.column的样式就是这样的。


#fh5co-board[data-columns]::before {
    content: '4 .column.size-1of4';
    display: none;
}

这句话的意思是,id为fh5co-board(#fh5co-board),且有属性名为 data-columns( [data-columns] )的标签将在其前面(::before)增加一个文本元素,元素的内容(content)是'4 .column.size-1of4'的文字,但这行文字是隐藏不可见(display:none)的。

这是干嘛呢?原来,salvattore在创建多个列的手法是这样的,它动态在要瀑布流显示的多个容器的前面增加一个文本元素,这个元素的内容会决定要创建几列瀑布流。

这里面写的 4 .column.size-1of4  的格式内容,是固定的,salvattore看到这样的文字就知道该处理成4列。

@media screen and (min-width: 701px) and (max-width: 850px) {
    #fh5co-board[data-columns]::before {
        content: '3 .column.size-1of3';
    }
}

这句的 意思是在701px到850px宽度的浏览器上,瀑布流就处理成3列了。


stock_view_details_24px_519332_easyicon.net.png 动态添加容器

另外,如何动态的添加容器呢?

代码如下:

	var conter=document.querySelector('#fh5co-board');
	var hts=[];
	for(var i=1;i<=29;i++){
		hts[i-1]=$(`<div class="item bounceIn animated"> <div class="animate-box"><a href="#" class="image-popup fh5co-board-img" title="Lorem">
            <img src="http://demo.cssmoban.com/cssthemes3/ft5_11_hydrogen/images/img_`+i+`.jpg" alt="Free HTML5 Bootstrap template"></a>
        </div><div class="fh5co-desc">一个魔幻效果的摄影网站模板<br>凡科建站 [科技]</div> </div>`)[0];
	}

	salvattore['append_elements'](conter, hts);

上例:

1 采用原生js获得包含所有容器的div对象。

var conter=document.querySelector('#fh5co-board');

这里一定要注意,是采用原生方式获取的,而不是jquery,如果采用jquery方式代码如下:

var conter=$('#fh5co-board')[0];


2 创建一个数组存放动态的容器

var hts=[];
for(var i=1;i<=29;i++){
  hts[i-1]=$(`<div class="item bounceIn animated"> 
  <div class="animate-box">
  <a href="#" class="image-popup fh5co-board-img" title="Lorem">
  <img src="http://demo.cssmoban.com/cssthemes3/ft5_11_hydrogen/images/img_${i}.jpg"
   alt="Free HTML5 Bootstrap template"></a>
  </div><div class="fh5co-desc">一个魔幻效果的摄影网站模板<br>凡科建站 
   [科技]</div> </div>`)[0];
}
salvattore.append_elements(conter, hts);

思路

  * 首先获取容器外面的div的dom对象
  * 动态创建多个容器,并放到一个数组中
  * salvattore方法的append_elements方法,将数组追加到div的最后面。


这里留意一下几个问题:

2.1 hts是一个数组

2.2 hts[i-1] 直接向数组中第一个元素赋值。javascript真是方便,不需要分配数组空间,直接就往数组里面插入数据。爽得很。

2.3 jquery方式创建dom对象

$(html字符串) ,jquery真是好用,如果用原生js创建dom对象就烦死了,但jquery直接写html代码就可以了。

不过,这样得到的对象不是原生dom对象,而是原生dom对象被封装后的jquery对象。

因此改写为:$(html字符串)[0]  以获得原生dom对象。

2.4 ES6的模板字符串

本例中的字符串很有意思,千万注意以下特点:

 * 很长的文字是可以换行的,

 * 字符串的开头结尾不是用引号(' 或 " )  而是 ` ,一个小撇,在键盘 1 左侧那个 ~ 按键

 * 中间插入变量没用拼接,而是采用${i} 

有兴趣的老友可以自己百度一下模板字符串,ES6的特性。



1472955908895017376.png总结


基本,salvattore的用法就是这么简单。

如果想看例子,可以访问 http://www.jiisb.com/tmpspider/index.html