Question

我正在尝试使用CSS和媒体查询生成以下图像：

(function ($) {

    $.fn.honeycombs = function (options) {

        // Establish our default settings
        var settings = $.extend({
            combWidth: 210,
            margin: 30
        }, options);

 /*       var windowWidth = $(window).outerWidth;
        console.log('windowWidth:',windowWidth);
        if (windowWidth <= 992) {
            settings.combWidth = 120;
            settings.margin = 30;
            console.log('combWidth:', settings.combWidth);
        }
*/
        function initialise(element) {

            $(element).addClass('honeycombs-wrapper');

            var width = 0;
            var combWidth = 0;
            var combHeight = 0;
            var num = 0;
            var $wrapper = null;


            /**
             * Build the dom
             */
            function buildHtml() {
                // add the 2 other boxes
                $(element).find('.comb').wrapAll('<div class="honeycombs-inner-wrapper"></div>');
                $wrapper = $(element).find('.honeycombs-inner-wrapper');

                $(element).find('.comb').append('<div class="hex_l"></div>');
                $(element).find('.hex_l').append('<div class="hex_r"></div>');
                $(element).find('.hex_r').append('<div class="hex_inner"></div>');

                $(element).find('.hex_inner').append('<div class="inner_span"><div class="inner-text"></div></div>');

                num = 0;

                $(element).find('.comb').each(function () {
                    num = num + 1;
                    var image = $(this).find('img').attr('src');
                    var css = 'url("' + image + '") ';

                    $(this).find('.hex_inner').attr('style', 'background-image: ' + css);

                    if ($(this).find('span').length > 0) {
                        $(this).find('.inner_span .inner-text').html($(this).find('span').html());
                    } else {
                        $(this).find('.inner_span').remove();
                    };
                });

                $(element).find('img, span, .inner_span').hide();
            }

            /**
             * Update all scale values
             */
            function updateScales() {
                combWidth = settings.combWidth;
                combHeight = (Math.sqrt(3) * combWidth) / 2;
                edgeWidth = combWidth / 2;


                $(element).find('.comb').width(combWidth).height(combHeight);
                $(element).find('.hex_l, .hex_r').width(combWidth).height(combHeight);
                $(element).find('.hex_inner').width(combWidth).height(combHeight);
            }

            /**
             * update css classes
             */
            function reorder(animate) {

                updateScales();
                width = $(element).width();

                newWidth = (num / 1.5) * settings.combWidth;

                if (newWidth < width) {
                    width = newWidth;
                }

                $wrapper.width(width);

                var row = 0; // current row
                var upDown = 1; // 1 is down
                var left = 0; // pos left
                var top = 0; // pos top

                var cols = 0;

                $(element).find('.comb').each(function (index) {

                    top = (row * (combHeight + settings.margin)) + (upDown * (combHeight / 2 + (settings.margin / 2)));

                    if (animate == true) {
                        $(this).stop(true, false);
                        $(this).animate({
                            'left': left,
                            'top': top
                        });
                    } else {
                        $(this).css('left', left).css('top', top);
                    }

                    left = left + (combWidth - combWidth / 4 + settings.margin);
                    upDown = (upDown + 1) % 2;

                    if (row == 0) {
                        cols = cols + 1;
                    }

                    if (left + combWidth > width) {
                        left = 0;
                        row = row + 1;
                        upDown = 1;
                    }
                });

                $wrapper
                    .width(cols * (combWidth / 4 * 3 + settings.margin) + combWidth / 4)
                    .height((row + 1) * (combHeight + settings.margin) + combHeight / 2);
            }

            /*  $(window).resize(function(){
                reorder(true);
            });
*/


            $(element).find('.comb').mouseenter(function () {
                $(this).find('.inner_span').stop(true, true);
                $(this).find('.inner_span').fadeIn();
            });

            $(element).find('.comb').mouseleave(function () {
                $(this).find('.inner_span').stop(true, true);
                $(this).find('.inner_span').fadeOut();
            });



            buildHtml();
            reorder(false);
        }

        return this.each(function () {
            initialise(this);
        });

    }

}(jQuery));

.honeycombs {
    position: relative;
    overflow: hidden;
    width: 100%;
    text-align: center;
}

.honeycombs .inner_span {
    display: block;
    height: 100%;
    width: 100%;
    background-color: #f7cd07;
    font-family: sans-serif;
    color: #000;
}

.honeycombs .inner-text {
    padding-top: 30%;
}

.honeycombs .honeycombs-inner-wrapper {
    display: inline-block;
    overflow: hidden;
    width: 700px;
    position: relative;
    height: 1200px;
}

.honeycombs .comb {
    position: absolute;
    display: inline-block;
}

.honeycombs .hex_l,
.honeycombs .hex_r {
    overflow: hidden;
    position: absolute;
    /* -webkit-backface-visibility: hidden; */
}

.honeycombs .hex_l {
    visibility: hidden;
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}

.honeycombs .hex_r {
    visibility: hidden;
    -moz-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    -webkit-transform: rotate(-120deg);
    transform: rotate(-120deg);
}

.honeycombs .hex_inner {
    display: block;
    visibility: visible;
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    cursor: pointer;
}

@media (max-width: 992px) {
    .honeycombs .comb {
        /*width: 100px;
        height: 100px;*/
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<html>
  <body >
  
    <script type="text/javascript">
        $(document).ready(function () {
            $('.honeycombs').honeycombs();
        });
    </script>


<div class="container">
    <section id="home-section">
        <article>
            <div class="honeycombs">
                <div class="comb"></div>
                <div class="comb"></div>
                <div class="comb">
                    <img src="http://www.sketchoholic.com/uploads/old_files/12951/phoenix.jpg" />
                    <span>Image Caption 3</span>
                </div>
                <div class="comb"></div>
                <div class="comb"></div>
                <div class="comb"> <img src="http://cdn.skim.gs/images/c_fill,dpr_1.0,h_391,w_695/s5y5lg53667serkntwa8/unique-female-dog-names" /> <span>Image Caption 6</span></div>
                <div class="comb"> <img src="http://placekitten.com/700/700" /> <span>Image Caption 7</span></div>
                <div class="comb"> <img src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Pavo_cristatus_-Castellar_Zoo%2C_Castellar_de_la_Frontera%2C_Spain-8a.png" /> <span>Image Caption 7</span></div>
                <div class="comb"></div>
                <div class="comb"></div>
                <div class="comb"></div>
                <div class="comb"> <img src="http://cdn.playbuzz.com/cdn/188b4f88-93d6-4810-a7b0-0aaf7df5375b/c45bda98-8119-421a-b338-160a7532da77.jpg" /> <span>Image Caption 12</span></div>
                <div class="comb"> <img src="http://monangebebe.m.o.pic.centerblog.net/piayisjw.jpg" /> <span>Image Caption 13</span></div>
                <div class="comb"></div>
                <div class="comb"></div>
            </div>
        </article>
    </section>
</div>
        </div>

  </body>
</html>

以下图片是我使用上述代码在桌面（大屏幕）上获取的图像。但是，在小尺寸屏幕上，我无法调整六边形的大小以使其响应。另外，是否可以在六边形之间生成线？

提前感谢您的帮助和建议。

Answer 1

您的问题有两个部分。

响应速度
为了使任何内容能够在网络上响应，您有两种选择。 CSS解决方案和JavaScript解决方案。
CSS
要以百分比形式声明其宽度，高度，填充（如果使用伪元素），而不是像素。例如：

.honeycombs .honeycombs-inner-wrapper {
    display: inline-block;
    overflow: hidden;
    width: 700px;    ->>  width: 20%
    position: relative;
    height: 1200px;  ->>  height: 50%
}

的JavaScript
您可以检查浏览器宽度并相应地自定义块的高度和宽度。

if($(window).width() < 860) {
    $('.honeycombs .honeycombs-inner-wrapper').css('width','250px');
}

内联
您可以使用HTML5画布在容器上绘制SVG。检查有关canvas元素的更多here。

六边形的不规则响应网格

1 个答案: