响应式-瀑布流

最新推荐文章于 2023-09-23 14:03:45 发布
最新推荐文章于 2023-09-23 14:03:45 发布
阅读量720 收藏 1
点赞数 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap_masonry</title>

    <!-- Bootstrap -->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:http:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <style>
        .grid-sizer,
        .grid-item {float: left; margin-bottom: 15px;}
        .grid-item img{ width: 100%; }
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <div class="grid">
        <div class="grid-sizer col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
        <div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
          <img src="1.jpg">
        </div>
        <div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
          <img src="2.jpg">
        </div>
        <div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
          <img src="3.jpg">
        </div>
        <div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
          <img src="4.jpg">
        </div>
        <div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
          <img src="1.jpg">
        </div>
        <div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
          <img src="2.jpg">
        </div>
        <div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
          <img src="3.jpg">
        </div>
        <div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
          <img src="4.jpg">
        </div>
        <div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
          <img src="1.jpg">
        </div>
        <div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
          <img src="2.jpg">
        </div>
        <div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
          <img src="3.jpg">
        </div>
        <div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
          <img src="4.jpg">
        </div>
      </div>
    </div>
    

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
    <script>
        http:// init Masonry
        var $grid = $('.grid').masonry({
        	itemSelector: '.grid-item',
		    columnWidth: '.grid-sizer',
		    percentPosition: true
        });
        
        http:// layout Masonry after each image loads
        $grid.imagesLoaded().progress( function() {
     	   $grid.masonry('layout');
        });
    </script>
  </body>
</html>


juner_ge
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
瀑布流响应式网页-html源码
02-28
瀑布流布局是一种常见的网页设计模式，它...开发者可以通过研究这些源码，了解如何实现一个功能完备、视觉吸引人的瀑布流响应式网页。同时，这个示例也可以作为一个学习资源，帮助初学者理解网页开发中的这些核心概念。
Bootstrap实战 - 瀑布流布局
后除
12-05 3731
讲 Bootstrap 基础的教程网上已经很多了，实际上 Bootstrap 中文网（bootcss.com）里的文档已经写的很详细了，但实战的案例却不多。这里用一些当前流行的网页布局为导向，使用 Bootstrap 中的样式来完成它。每次只讲与案例相关的知识点，边学边练，加强理解。
Bootstrap响应式布局瀑布流
02-14 1871
瀑布流最常用的插件莫属Masonry。它通过将不同高度的内容排列组合在最佳的位置，就像砌墙一样从上到下无缝的组合在一起。 Bootstrap是当下比较热门的web前端开发框架之一，通过引入Bootstrap，你可以很快的给你的项目做一个自适应的页面。 为什么需要Masonry 在某些项目中，我们可能需要展示一些产品、主题或者项目等，通过网格的形式排列在一起，由于每个内容的...
Bootstrap-waterfall瀑布流
占星安啦的博客
05-19 4409
http://wlog.cn/waterfall/ js引用 <link href="path/to/css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap-waterfall.js">&...
bootstrap的.card-columns瀑布流显示列数修改
acvc225的博客
05-04 2175
bootstrap多列卡片浮动排版可以实现卡片瀑布流显示，官方说明是： 將卡片包在.card-columns 中，可以將做出象 Masonry网站的瀑布式排列卡片效果， 卡片是使用column属性，而不是基于 flexbox弹性布局，从而实现更方便实用的浮动对齐， 顺序是从上到下、从左到右。 官方默认显示是：小窗口下单列显示，大窗口下3列显示 但是现在想要他在小窗口下2列显示 在网上...
前端瀑布流的实现方法总结
qq_42434695的博客
07-11 394
还有令人头疼的是gutter参数只能使用像素（px）为单位，而且不支持小数，所以只能用js计算百分比得到参数再赋值，一定要取容器宽度的值的百分比！看到网上有很多实现瀑布流的方法，一开始想用纯css试，试了很多后放弃了，网上有很多方法，但是要么很麻烦，要么不能完美实现。第三种用column布局，这个方法会导致原本一个整体元素被拆分为若干份，会出现元素一部分在一列底部，另一部分在另一列顶部的情况，无法完美实现。第二种用flex布局，float布局都会导致垂直方向间距较大等问题，无法完美实现。
使用Bootstrap与jQuery实现瀑布流
JaydenCheng的博客
02-12 959
使用Bootstrap与jQuery实现瀑布流
jQuery实现响应式瀑布流效果（jQuery+flex）
觉醒法师的专栏
05-29 2653
瀑布流原理：是一种常见的网页布局方式，它的特点是将内容以多列的形式呈现，每一列的内容高度不固定，根据内容的大小自适应调整，从而形成了像瀑布一样的流动效果。瀑布流的实现原理涉及到数据加载、布局设计、图片加载和响应式设计等方面，需要综合考虑各个方面的因素，以实现高效、流畅、美观的瀑布流效果。目前网上很多技术博文是使用定位完成瀑布流效果的，这里将使用jquery和flex布局来实现响应式瀑布流效果。
avalonjs制作响应式瀑布流特效
10-24
瀑布流主要应用在图片展示页面上。如果有一大批图片需要展示，原始图片尺寸不一致，又希望每张图片都能不剪裁，完整显示，那么就要给图片规定一个宽度，解放它们的高度。利用网页高度不限这个特性，充分利用页面的...
瀑布流图片展现响应式网页模板
01-22
瀑布流图片展现响应式网页模板是一种现代网页设计技术，它以独特的方式呈现图像，使得页面在不同设备上具有良好的适应性和用户体验。这种布局方式最早由Pinterest网站流行开来，因其图像排列像瀑布一样逐级下落而...
mpmansoryjs是一款基于Bootstrap的mansory网格瀑布流布局jQuery插件
08-10
mp-mansory.js是一款基于Bootstrap的mansory网格瀑布流布局jQuery插件。通过该插件可以非常轻松的实现瀑布流效果，它通过断点来控制响应式效果，非常实用。
jQuery响应式图片瀑布流布局代码.zip
05-24
【jQuery响应式图片瀑布流布局代码】是一种网页设计技术，旨在提供一种动态、美观且适应不同设备屏幕尺寸的图片展示方式。在这个项目中，开发者利用了JavaScript库jQuery的高效特性和响应式设计原理来实现这一功能。...
jQuery可加入购物车的响应式瀑布流插件
09-01
本篇文章将详细讲解基于jQuery的响应式瀑布流插件，以及如何实现商品加入购物车的功能。 首先，让我们理解“响应式”设计。响应式网页设计是一种使网站能在不同设备（如手机、平板电脑、台式机）上提供良好用户体验...
flex瀑布流（响应式配置）
Sqddian的博客
02-21 1805
flex布局 瀑布流 响应式
HTML＋CSS＋JS 瀑布流式布局（实现懒加载）
qq_44386537的博客
12-27 8807
HTML + JS＋CSS实现瀑布流式布局（包含懒加载） 前几天兴致来了想做一个瀑布流布局的网页，然后就有了各种“神操作”，也在网上看了一些相关的知识点；所以这里对自己这几个小时来一个总结 先上效果图 首先来说一下瀑布流的原理吧：瀑布流是许多数据块组成的，可以是图片，可以是div，但是它们都有一个特点，就是等宽不等高，正是因为它等宽不等高，所以如果按部就班的排布的话，才会出现很大的缝隙，特别不好看，说白了瀑布流布局就是充分利用图片之间的空隙来合理的布局，使布局看起来好看，符合人眼的审美。 首先上CSS布局
HTML之瀑布流布局
weixin_45846139的博客
06-14 1329
什么是瀑布流布局 瀑布流，又称瀑布流式布局。 是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 瀑布流布局的特点 琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。 唯美：图片的风格以唯美的图片为主。 操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。 瀑布流对于图片的展现，是高效而具有吸引力的，用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式
用Bootstrap实现mansory网格瀑布流布局插件
ICode联盟
08-24 444
通过该插件可以非常轻松的实现瀑布流效果，它通过断点来控制响应式效果，非常实用。columnClasses：添加到网格上的额外的class。lg：视口尺寸大于1200像素。md：视口尺寸大于992像素，小于1200像素。sm：视口尺寸大于720像素，小于992像素。xs：视口尺寸小于720像素。distributeBy：排序选项：order：如果设置为true，网格项按默认的顺序排列。height：如果设置为true，没列的高度使用分配项的最小高度。attrOrder：升序或降序："asc"/"desc"。.
React 实现一个瀑布流组件（TypeScript） 支持宽度响应式，支持任意列数，支持触底加载，良好的TS类型支持
m0_64130892的博客
09-23 1608
瀑布流是很常见的布局，移动端、PC端均可使用，主要特点是每个元素等宽，但是不等高。 （比如我们逛淘宝，商品的展示就是瀑布流）瀑布流只使用css的话，效果非常不好，且限制特别多，一般都是使用JS进行高度计算 注：本文的实现，需要提前知道图片的大致宽高比例，可以让后端返回（因为在Img加载出来后，前端才能获取到真实的宽高，不划算） 本文代码示例效果：支持宽度响应式，支持任意列数，支持触底加载，良好的TS类型支持
html css js网页设计
最新发布
07-12
HTML、CSS和JavaScript是构建网页和网站的基本技术，它们共同工作来创建和设计用户界面。下面是关于这三种技术的详细介绍： ### HTML (HyperText Markup Language) - **定义**：HTML是构建网页内容的标准标记语言。 - **作用**：用于创建网页的结构和内容，如段落、链接、图片、表格等。 - **语法**：使用标签（如 `<p>`, `<div>`, `<a>`, `<img>` 等）来定义网页元素。 ### CSS (Cascading Style Sheets) - **定义**：CSS是一种样式表语言，用于描述HTML文档的呈现方式。 - **作用**：用于设置网页的布局、颜色、字体和其他视觉元素。 - **语法**：通过选择器（如 `p`, `.myclass`, `#myid` 等）应用样式规则。 ### JavaScript - **定义**：JavaScript是一种脚本语言，通常用于网页上实现交互功能。 - **作用**：允许网页与用户进行交互，如响应用户操作、动态更新内容、动画效果等。 - **语法**：Java
vue 响应式 瀑布流
08-27
Vue响应式瀑布流是指在Vue.js中实现一个响应式的瀑布流布局。瀑布流布局是一种常见的网页布局方式，主要用于展示图片等元素，每一列的高度不同，元素会根据空闲列的高度来依次排列。 在Vue中实现响应式的瀑布流布局，可以借助Vue的指令和计算属性来实现。下面是一个简单的示例： 首先，在Vue组件中定义一个data属性来存储瀑布流的数据，比如一个图片列表： ```javascript data() { return { images: [ { src: 'image1.jpg', height: 200 }, { src: 'image2.jpg', height: 300 }, { src: 'image3.jpg', height: 250 }, // 其他图片数据... ], cols: 3, // 瀑布流的列数 colHeights: [] // 每列的高度 } } ``` 然后，在模板中使用v-for指令遍历images数组，动态生成图片元素，并使用计算属性来计算每列的高度： ```html <div class="waterfall"> <div class="col" v-for="(image, index) in images" :key="index" :style="{ height: getColumnHeight(index) + 'px' }"> <img :src="image.src" alt=""> </div> </div> ``` 接下来，在Vue组件的计算属性中定义getColumnHeight方法，用来计算每列的高度： ```javascript computed: { getColumnHeight() { return (index) => { if (!this.colHeights[index]) { this.colHeights[index] = 0; } return this.colHeights[index]; }; } } ``` 最后，在mounted钩子中监听窗口变化，以便在窗口大小改变时重新计算列高度： ```javascript mounted() { window.addEventListener('resize', this.updateColumnHeights); }, methods: { updateColumnHeights() { // 更新每列的高度 // ... } } ``` 以上是一个简单的Vue响应式瀑布流布局的示例，你可以根据实际需求进行调整和扩展。希望对你有帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值