0

我正在通过本教程建立一个网站。

我试图弄清楚如何根据内容的高度添加自动高度。它最初被锁定为 windows 大小，但我希望它进一步向下扩展。

原代码第455行：

        calcHeight : function() {

        var heightPreview = winsize.height - this.$item.data( 'height' ) - marginExpanded,
            itemHeight = winsize.height;

        if( heightPreview < settings.minHeight ) {
            heightPreview = settings.minHeight;
            itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded;
        }

        this.height = heightPreview;
        this.itemHeight = itemHeight;

    },

我的解决方案在 50% 的时间内都有效（在本地效果很好？！）：

        calcHeight : function() {
        var lol = this.$fullimage[0].getElementsByTagName('img')[0];
        var oImage = new Image();

        oImage.onload = function(){
            this.height// width of loaded image
        }

        oImage.src = lol.src;
        this.height = oImage.height;
        this.itemHeight = oImage.height+650;
    },
    setHeights : function() {

        var self = this,
            onEndFn = function() {
                if( support ) {
                    self.$item.off( transEndEventName );
                }
                self.$item.addClass( 'og-expanded' );
            };
4

2 回答 2

1

干得好。我认为这将适用于您要完成的工作。基本上，无论文本有多长，div 的高度要么是内容的高度，要么是第一张图像的高度，以较大者为准。然后当点击 div 时，它会加载额外的图像。加载图像后，如果再次单击 div，则它会缩小到原始大小。

检查一下，如果需要任何调整，请告诉我。

注意：这在浏览器窗口中看起来更好，但在 jsfiddle 中有效。

http://jsfiddle.net/fLPM5/1/

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <style>
            .story {
                width:75%;
                padding:5px;
                margin:5px;
                cursor:pointer;
                border:1px solid black;
            }
            .text{
                padding:5px;
                margin:5px;
                width:20%;
            }
            .images{
                float:right;
                padding:5px;
                margin:5px;
                width:70%;
            }
            img{
                padding:5px;
                margin:5px;
                width:95%;
            }
        </style>
    </head>
    <body>
        <div class="story" id="story1">
            <div class="images">
                <img src="http://www.gstatic.com/webp/gallery/1.jpg" />
                <img src="http://www.gstatic.com/webp/gallery/2.jpg" />
                <img src="http://www.gstatic.com/webp/gallery/3.jpg" />
                <img src="http://www.gstatic.com/webp/gallery/4.jpg" />
            </div>
            <div class="text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu 100% Original Work created by Howard Renollet for StackOverflow.com http:// stackoverflow.com /questions /19916419 /expanding-preview-calcheight-function/ ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut.</p>
            </div>
        </div>
        <div class="story" id="story2">
            <div class="images">
                <img src="http://www.gstatic.com/webp/gallery/1.jpg" />
                <img src="http://www.gstatic.com/webp/gallery/2.jpg" />
                <img src="http://www.gstatic.com/webp/gallery/3.jpg" />
                <img src="http://www.gstatic.com/webp/gallery/4.jpg" />
            </div>
            <div class="text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.</p>
            </div>
        </div>
        <div class="story" id="story3">
            <div class="images">
                <img src="http://www.gstatic.com/webp/gallery/1.jpg" />
                <img src="http://www.gstatic.com/webp/gallery/2.jpg" />
                <img src="http://www.gstatic.com/webp/gallery/3.jpg" />
                <img src="http://www.gstatic.com/webp/gallery/4.jpg" />
            </div>
            <div class="text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper.</p>
            </div>
        </div>
        <script>
            (function () {
                //Get each story box
                $(".story").each(function () {

                    //for each .images box
                    $(this).children(".images").each(function () {
                        //hide all of the images
                        $(this).children("img").hide();
                    });

                    //show the first image
                    $(this).children(".images").children("img:first").show();

                    //get the text height
                    var textHeight = $(this).children(".text").height();

                    //get the image height
                    var imgHeight = $(this).children(".images:first-child").height();

                    //define originalHeight
                    var originalHeight;

                    //Which one is bigger?
                    if (textHeight >= imgHeight) {
                        //If the text height is larger
                        //set the story box height to the text height
                        $(this).height(textHeight);
                        //set originalHeight
                        originalHeight = textHeight;

                    }
                    else if (imgHeight > textHeight) {
                        //if the image height is larger
                        //set the story box height to the image height
                        $(this).height(imgHeight);
                        //set originalHeight
                        originalHeight = imgHeight;
                    };

                    //when clicking the div
                    $(this).click(function () {

                        //if this height is less than the image max height
                        if ($(this).height() <= originalHeight) {

                            //show the images
                            $(this).children(".images").children("img").show();

                            //set this height to the image max height
                            $(this).height($(this).children(".images").height());
                        }
                        else {
                            //for each .images box
                            $(this).children(".images").each(function () {

                                //hide all of the images
                                $(this).children("img").hide();
                            })

                            //show the first image
                            $(this).children(".images").children("img:first").show();

                            //set the text height
                            var textHeight = $(this).children(".text").height();

                            //set the image height
                            var imgHeight = $(this).children(".images:first-child").height();

                            //Which one is bigger?
                            if (textHeight >= imgHeight) {
                                //If the text height is larger

                                //set the story box height to the text height
                                $(this).height(textHeight);
                            }
                            else if (imgHeight > textHeight) {
                                //if the image height is larger

                                //set the story box height to the image height
                                $(this).height(imgHeight);
                            };
                        };
                    });
                });
            })();
        </script>
    </body>
</html>
于 2013-11-13T18:49:53.047 回答
0

Заменить этим:

计算高度：函数（）{

        var heightPreview = $('.og-details p').height() + this.$item.data( 'height' ) + marginExpanded,
            itemHeight = heightPreview;

        if( heightPreview < settings.minHeight ) {
            heightPreview = settings.minHeight;
            itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded;

        }

        this.height = heightPreview;
        this.itemHeight = itemHeight + this.$item.data( 'height' ) + marginExpanded ;

    },
于 2014-07-10T08:50:59.773 回答