jquery实现的流式布局

最新推荐文章于 2024-03-23 09:32:42 发布
最新推荐文章于 2024-03-23 09:32:42 发布
阅读量735 收藏
点赞数
分类专栏： jquery 文章标签： jQuery 流布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yysmilehaha/article/details/46457751
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .main{
            width: 1200px;

            border: 1px solid orange;
            position: relative;
            margin: 10px auto;
        }
        .box{
            float: left;
            padding: 15px 0 0 15px;
        }

        .pic{
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 5px #ccc;
        }
        .pic img{
            width: 162px;
            height: auto;
        }


    </style>
</head>
<body>

<div class="main">

    <div class="box">
        <div class="pic">
            <img src="images/0.jpg" alt=""/>
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/1.jpg" alt=""/>
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/2.jpg" alt=""/>
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/3.jpg" alt=""/>
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/4.jpg" alt=""/>
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/5.jpg" alt=""/>
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/6.jpg" alt=""/>
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/7.jpg" alt=""/>
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/8.jpg" alt=""/>
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/9.jpg" alt=""/>
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/10.jpg" alt=""/>
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/11.jpg" alt=""/>
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/12.jpg" alt=""/>
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/13.jpg" alt=""/>
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/14.jpg" alt=""/>
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/15.jpg" alt=""/>
        </div>
    </div>

</div>
<script src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
    $(function () {

        var sizeP=$('div.box').length;

        var arrH=[];
        for(var i=0;i<sizeP;i++){
            if(i<6){
                arrH.push($('div.box').get(i).offsetHeight);

            }else{
                var minx=Math.min.apply(Math,arrH);
                var indexmin=arrH.indexOf(minx);
                console.log(indexmin);
                $('div.box').eq(i).css('position','absolute');
                var left=$('div.box').eq( indexmin ).position().left

                console.log(left+'left')
                $('div.box').eq(i).css('left',left);
                $('div.box').eq(i).css('top',minx);

                arrH[indexmin]=minx+$('div.box').get(i).offsetHeight
            }
        }
        console.log(arrH)


    })
</script>
</body>
</html>




yysmilehaha
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用jQuery完成瀑布流布局
yongxiqianduan的博客
04-07 459
页面的瀑布流布局。使用jQuery框架，用HTML、CSS、JS、AJAX、DOM等共同配合完成。
JQuery实现照片瀑布流
POSTBIRD
01-10 3396
JQuery实现照片瀑布流 摘要：总所周知，百度搜图结果下拉会越来越多自动呈现，成为瀑布流。想要打造类似百度图片搜索的瀑布流不是困难的事情，通过javascript也能实现只是实现的比较麻烦，通过jquery实现50+行代码即可。而且相比百度的样式，更加自由化！ 废话不多说，先上图：下图最终的效果图，比较丑，是因为图片我没有经过处理，随便找的图片。【照片特点】宽度全部相同，高度不相同。 （注：
在web中使用JQuery实现流式加载，不使用任何其他组件
WenRouDG的博客
10-25 783
前言         最近呢，有点忙。但是每天都有记录，怎么说呢，每天都有收获。看我的发布时间就可以知道，基本一天发布好几个。对……我就是在一周中花一天时间来整理，一周所掌握的知识点和记录。好，那么我们就进入正题了！         这几天和技术总监有聊到流式加载和懒加载的问题。大家都知道，当数据量特别大的时候，为了不影响页面的加载速度问题。一般是采
jQuery实现瀑布流布局
做技术，坚持才是最重要的，一时的热情只是暂时的进步
02-17 152
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
jq超简单的流式布局，代码简单，容易修改
小结巴巴的博客
03-08 156
1.看看效果吧！   2.html代码index.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;s
jquery实现模态框
anmi8562的博客
07-12 1463
需求： 1、点击添加弹出模态框； 2、点击编辑弹出模态框，并有默认值； 3、点击删除，删除此行数据。 <!-- jquery模态框 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
jquery实现轮询
θ..θ的专栏
04-16 1万+
function showUnreadNews() { $(document).ready(function() { $.ajax({ type: "POST", url: "unread_list.php", dataType: "json",
不对称的流式布局
06-29
在实现这些流式布局时，jQuery是一个强大的JavaScript库，可以帮助开发者轻松地处理DOM操作、事件处理、动画效果等，提高页面的交互性和用户体验。例如，"jqueryfreewall"可能是一个基于jQuery的插件，用于创建自由...
jQuery拖拽排序布局插件
06-10
3. **布局设计**：插件提供了8种不同的效果，这意味着它可以适应不同的布局需求，如网格布局、流式布局等。每种布局都有其特定的算法来决定元素在被拖动后的新位置，以保持整体布局的美观和有序。 4. **CSS与JS协同...
流式布局的筛选demo
07-06
在“ScreenTypeDemo”这个项目中，很可能是使用了`<flexbox>`来实现流式布局。Flexbox允许开发者轻松控制容器内的子元素，包括它们的对齐方式、顺序和分配空间的方式。通过设置`display: flex;`，容器变为一个弹性...
流式布局案例（怎么能把名字到11个字）.zip
06-21
流式布局是网页设计中的一种常见布局方式，它允许页面元素根据用户设备的屏幕尺寸进行自适应调整，从而实现响应式设计。这种布局方法在移动优先的设计策略中尤为重要，因为可以确保网页在不同分辨率和屏幕大小的设备...
使用Jquery实现简单的页面布局
AMYCX的博客
10-12 854
三.给页面设置实现方法。
10个jQuery布局教程
07-05 291
10个jQuery的布局教程 ，以帮助您在您的网页的HTML元素的显示。 当您提供一个ALT / title属性浏览器会自动显示工具提示。 （Internet Explorer中也将使用alt属性，Firefox使用title属性）。 学会调整你的布局，以适应不同的浏览器。 请享用！ :) 1.比迪jQuery插件 用了jQuery自动集方向性属性基于在元件第一强烈方向性信HTML元素。 有...
jQuery布局（原创）
idream java
09-25 209
是这样的，开始准备做一个美观点的后台页面，考虑使用EXTJs。可考虑到协议的问题，最终还是放弃了，继续使用jQuery吧。传统的后台页面布局是表格套表格，加上freamset已经ifream，当然也可以做到美观，可那是一个乱啊。下面介绍一个jQuery的插件，目前除了官方的英文文档，还没有发现可用的中文说明。用我极差的文笔在这里发表一下，希望大家不要介意。只是把自己的收获与大家分享一下。废话不多说...
Wookmark-jQuery：打造优雅响应式布局的利器
gitblog_00075的博客
03-23 654
Wookmark-jQuery：打造优雅响应式布局的利器 项目地址:https://gitcode.com/GBKS/Wookmark-jQuery Wookmark-jQuery 是一个轻量级、高性能的jQuery插件，专为创建灵活的网格布局而设计，特别是在实现响应式网页设计时表现出色。它通过智能地自动调整元素间距和排列方式，确保即使在不同屏幕尺寸和设备上也能保持优雅的显示效果。 技术分析 1...
jquery实现可拖拽布局
热门推荐
来一颗砂糖橘
04-28 2万+
前端实现可拖拽布局Jquery
jQuery实现响应式瀑布流效果（jQuery+flex）
觉醒法师的专栏
05-29 2662
瀑布流原理：是一种常见的网页布局方式，它的特点是将内容以多列的形式呈现，每一列的内容高度不固定，根据内容的大小自适应调整，从而形成了像瀑布一样的流动效果。瀑布流的实现原理涉及到数据加载、布局设计、图片加载和响应式设计等方面，需要综合考虑各个方面的因素，以实现高效、流畅、美观的瀑布流效果。目前网上很多技术博文是使用定位完成瀑布流效果的，这里将使用jquery和flex布局来实现响应式瀑布流效果。
传感器实训霍尔件无损探伤.doc
最新发布
07-16
传感器
50 个 jQuery 插件可将你的网站带到另外一个高度
11-23
Isotope，它是一个动态网格布局的插件，可以帮助用户实现瀑布流式的网页布局；Waypoints，它是一个简单且易用的滚动事件插件，可以帮助用户创建各种交互效果。这些插件的丰富功能和灵活性，让它们成为网站开发中的不...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值