前端使用masonry瀑布流式布局

前端使用masonry瀑布流式布局,第1张

@前端使用瀑布流式布局

引入插件 masonry.js

html 代码

	
	  
	    
	  
	  
	    
	  
	  
	    
	  
	  
	    
	  
	  
	    
	  
	  
	    
	  
	  
	    
	  
	  
	    
	  
	  
	    
	  
	  
	    
	  
	  
	    
	  
	  
	    
	  
	  
	    
	  
	  
	    
	  
	

css 代码
    .grid-item {
        position: relative;
        width: 25%;
        border: 2px solid hsla(0, 0%, 0%, 0.5);
        box-sizing: border-box;
        counter-increment: count;
    }


    .grid-item img {
        display: block;
        height: auto;
        width: 100%;
    }


    .grid-item::after {
        position: absolute;
        display: block;
        top: 2px;
        left: 2px;
        width: 24px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        background-color: #000;
        color: #fff;
        content: counter(count);
    }
javaScript
  const dom = document.getElementById('grid');
  new Masonry(dom, {
    itemSelector: '.grid-item',
    percentPosition: true, //使用百分比宽度的响应式布局
    horizontalOrder: true, //对项目进行布局以保持水平的从左到右的顺序,定义了此条件,照片一般会按照从左到右顺序排列,但也不是绝对的。
    originLeft: true, //设置布局方式为从左到右,此项是默认值,可以不填写,如果你设置值为false,则会从右到左排序
    originTop: true,//设置布局方式为从上到下,此项是默认值,可以不填写,如果你设置值为false,则会从下到上排序
  })

欢迎分享,转载请注明来源:内存溢出

原文地址:http://outofmemory.cn/web/1298015.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-06-10
下一篇2022-06-10

随机推荐

  • 2017年贝尔法斯特女王大学与肯特大学哪个好

      贝尔法斯特女王大学与肯特大学哪个好?具体请咨询立思辰留学360专业顾问团队,咨询电话:4008-941-360贝尔法斯特女王大学留学360介绍,作为罗素大学集团成员之一,贝尔法斯特女王大学跻身全球

    2022-07-07
    000
  • 泰国玛希隆大学以什么专业为主

      玛希隆大学介绍玛希隆大学已发展为泰国最负盛誉的大学之一。其科研能力、教职员工的学术才能以及在教学、研究、国际学术合作和专业服务领域的突出成就都是举世闻名的。它开设了多种社会和文化学科的顶级品质课程

    2022-07-07
    300
  • 蓝康恒大学入学条件

    蓝康恒大学立思辰留学360介绍,蓝康恒大学(RamkhamhaengUniversity)(简称RU)是泰国一所国立式大学,位于泰国首都曼谷,因泰国苏卡泰时期第三任国王蓝康恒(泰国文字的发明者)而得名

    2022-07-07
    300
  • 曼谷大学传媒详细解读

      曼谷大学介绍据立思辰留学360介绍,曼谷大学创建于1962年,是目前泰国成立最早,规模最大的私立大学之一。学校以“全面发掘学生潜质,注重培养时代人才”为目标,提倡和贯彻“德智教育协调发展”。目前学

    2022-07-07
    300
  • 东英吉利大学是英国一所怎样的学校

    东英吉利大学(University of East Anglia,简称UEA,又译作东英吉利大学,东英格兰大学),位于英国诺里奇(Norwich)。从1963年创校至今,东英吉利大学特别在传媒、文学、

    2022-07-07
    000
  • 2017年班戈大学与赫特福德大学哪个好

      班戈大学与赫特福德大学都有自己的优势专业,具体请咨询立思辰留学360专业顾问团队,咨询电话:4008-941-360班戈大学班戈大学 (英语:Bangor University,威尔士语:Prif

    2022-07-07
    000
  • 新加坡莱佛士音乐学院地理位置

    新加坡莱佛士音乐学院(SRMC)是一所已在私立教育理事会(CPE)注册的高等音乐学府。SRMC不只是新加坡最知名的音乐艺术高等音乐学府之一,同时它还在2011年获得教育信托认证。地理位置新加坡莱佛士音

    2022-07-07
    300
  • 关于2017英国哈德斯菲尔德大学应该知道些什么

      哈德斯菲尔德大学是一所以学生为中心的友好大学,拥有卓越的专业素养,并以提高学生的职业能力为己任。哈德斯菲尔德大学将为你提供充满活动、启迪思想的学习环境。作为不断发展中的研究和学术卓越中心,哈大的历

    2022-07-07
    300
  • 英国兰卡斯特大学的学生服务

    兰卡斯特大学成立于1964年,是英国10大科研性大学之一,其教学质量也一直名列前茅。该校的校园景色优美,乘公共汽车到兰卡斯特市中心只需要10分钟。立思辰留学360指出,兰卡斯特大学的学术成就享誉全球,

    2022-07-07
    000

发表评论

登录后才能评论

评论列表(0条)

    保存