jQuery实现响应式瀑布流效果（jQuery+flex）




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Responsive Waterfall Layout</title>
    <style>
        .container {
            position: relative;
            width: 100%;
        }
        .item {
            padding: 5px;
            margin-bottom: 10px;
        }
        .item img {
            width: 100%;
            height: auto;
            display: block;
        }
    </style>
</head>
<body>
 
<div class="container">
    <!-- Images will be loaded here dynamically -->
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="path/to/jquery.flex.js"></script>
<script>
    $(document).ready(function() {
        let $container = $('.container');
        let columns = 3;
        let size = 240; // px
 
        function createWaterfall() {
            let $items = $('.item');
            let $newItems = $();
            for (let i = 0; i < $items.length; i++) {
                if (i < columns) {
                    $newItems = $newItems.add($items.eq(i).clone());
                }
            }
            $container.empty();
            $newItems.each(function(index, element) {
                $container.append(element);
                if (index % columns === columns - 1) {
                    $container.append('<br>');
                }
            });
            $container.flexible();
        }
 
        createWaterfall();
 
        // 模拟图片加载，实际应用中应该从服务器获取图片信息
        $.getJSON('path/to/image_urls.json', function(data) {
            $.each(data, function(index, url) {
                let $item = $('<div>').addClass('item').css({
                    width: size,
                    // 可以从服务器获取图片的宽度和高度信息
                    // 然后根据宽度计算高度保持比例
                });
                let $img = $('<img>').attr('src', url).appendTo($item);
                $container.append($item);
                if (index % columns === columns - 1) {
                    $container.append('<br>');
                }
            });
            $container.flexible();
        });
    });
</script>
 
</body>
</html>

这个代码示例展示了如何使用jQuery和flexible.js插件来创建一个响应式的瀑布流布局。首先，我们定义了基本的HTML和CSS结构。然后，我们使用jQuery来动态加载图片，并计算图片数量来创建瀑布流。最后，我们使用jQuery的getJSON方法来模拟从服务

jQuery实现响应式瀑布流效果（jQuery+flex）

评论已关闭

推荐阅读